数学函数在Angle 4 HTML中不起作用

Question

使用以下行：

<div class="card light-blue darken-4" [ngClass]="'card-grad-'+Math.floor(Math.random() * 10) + 1">

给出以下错误：

ERROR TypeError: Cannot read property 'floor' of undefined

和component.ts。

怎么解决呢？

甚至尝试使用decare var Math:any，也尝试在类中定义数学，但徒劳无功。

Answer 1

在component.ts中声明数学

Math = Math;

或创建一个函数来计算您的值并将其绑定到ng-class

Answer 2

尝试这样的事情：

<span>{{Math.floor(Math.random() * 10) + 1}}</span>

在你的“.ts”文件中：

Math: any;
Constructor() {
    this.Math = Math;
}

此表达式虽然会导致您出现
错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。先前值：“6”。当前值：“3”。

您仍然可以在模板中使用数学。

请参阅以下链接了解表达式更改错误： https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

要消除该错误，您可以在 app.module.ts 中使用“enableProdMode”。就像下面这样：

import {enableProdMode } from '@angular/core';

export class AppModule {}
enableProdMode();

或者：使用可以使用 Angular/Core 中的“ChangeDetectionStrategy” import { Component, ChangeDetectionStrategy } from '@angular/core'; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, selector: '<selector>', templateUrl: 'template.html', })