模板渲染后的角度变化检测

Question

所以我循环遍历我的 html 中的项目列表并设置调用函数以返回 true 或 false，以便我可以应用相应的类，如果任何项目匹配，我也会设置一个变量名单。 我将这个变量用于另一个元素作为 *ngIf。现在最初，在模板加载之前，这个变量是假的。之后，组件初始化并呈现 html。现在我有一个循环的项目列表，我在那里调用一个函数，它将该变量设置为 true，但以 ngIf 为条件的元素不可见。

我认为这是因为当组件完全初始化时，变量值为 false，然后当 html 呈现时，变量的值变为 true。但是这个变化并没有被 angular 检测到，因为它已经渲染了那个元素并且也没有得到任何变化事件来观察变量。

这是我的html

<div *ngIf="someVariable">
some content
</div>

<div *ngFor="let item of items">
  <div [ngClass]="{isItemMatched(item) : my-class}"></div>
</div>

这是我的组件

somevariable = false

isItemMatched(item) {
  forLoop() {
   if(true) {
      this.someVariable = true
      return true
     }
   }
}

有什么方法可以让我们触发角度变化检测，比如在点击事件或某些事情中，以便角度可以更新视图？

Answer 1

首先，您以错误的方式使用 ngClass。 ngClass 的左边应该是类名，右边应该是布尔值。例如。

<div [ngClass]="{'my-class' : isItemMatched(item)}"></div>

要在值更改时更新视图，可以使用ChangeDetectorRef 在你的构造函数中注入这个类，然后使用方法 markForCheck()。此方法更新视图。

constructor(private cdr: ChangeDetectorRef){
}
someMethod(){
  this.someVariable = true; //Value changed.
  this.cdr.markForCheck(); //View updated.
}