Question

我已经对此进行了一些搜索，但没有发现任何有用的东西。

当我将函数传递给ngStyle时，我收到以下错误：

Expression 'getClass()' in ProductView has changed after it was checked.

我的模板看起来像：

<div class="itemContainer">
    <div class="well imageHolder" [ngClass]="getClass()">
        <img [src]="'img/thumbs/' + item.images[0]" class="productImage" id="productImage">
    </div>
</div>

我不确定会解决这个问题，或者即使目前可以解决这个问题。我注意到ngStyle也会出现这个错误。

所有帮助将不胜感激。

Answer 1

属性绑定使用以下语法：[someProperty]="an Angular template expression"。

在您的情况下，模板表达式是一个函数（而不是组件属性）。没关系。但根据Template Syntax开发指南的“表达指南”部分，表达式必须是“幂等的”。这意味着，如果

expression返回一个字符串或数字，当连续两次调用时，它返回相同的字符串或数字。如果表达式返回一个对象（包括Date或Array），则在连续两次调用时返回相同的对象 reference 。

由于您没有提供getClass()函数的代码，我们只是假设它违反了幂等规则。（您可能每次都返回一个新数组或一个新对象。）

在开发模式（默认模式）下，更改检测会运行两次，并且会捕获幂等违规行为。

要解决此问题，请返回相同的数组或对象引用（但您可以修改数组内容或对象属性/值）。如，

export class MyComponent {
   anArray = [];
   getClass() {
      // manipulate (don't reassign) anArray here, and return it
      return this.anArray;
   }
}

Answer 2

答案很简单，您可以使用函数执行此操作，只需确保该函数将返回类名称

on html：

<div [ngClass]="getClassByValue('a')"> My Div</div>

ts文件上的

：

  getClassByValue(value: string) {
    switch (value) {
      case "a": return "class-a";
      case "b": return "class-b";
    }
  }

将在您的元素上以类名“class-a”结束。

希望有所帮助：）

Answer 3

你不应该这样做（是的，这可能在角1.x :)中工作。）除非你启用生产模式，否则检查就在那里：

https://angular.io/docs/js/latest/api/core/enableProdMode-function.html

我的猜测（免责声明：这是猜测...）是你应该设置反映正确状态的文字/变量。变量不会导致副作用，方法可以。我认为他们强制执行此操作是因为它可以帮助您防止过于频繁的摘要循环。

所以这是要走的路：

<div class="itemContainer">
    <div class="well imageHolder" [ngClass]="{ 'classA': variableA, 'classB': variableB }">
        <img [src]="'img/thumbs/' + item.images[0]" class="productImage" id="productImage">
    </div>
</div>

因此，不是在每个摘要循环上运行一些代码来检查是否应该设置类（并且可能通过更改其他东西来导致新的摘要循环），而是应该在需要设置时设置这些变量。

Angular 2：将函数传递给模板

3 个答案: