javascript - 模板渲染后的 Angular 变化检测

Question

因此，我循环遍历 html 中的项目列表，并设置一个调用函数以返回 true 或 false，以便我可以应用相应的类，如果任何项目在中匹配，我也会设置一个变量列表。 我将此变量用作另一个元素 *ngIf。现在最初，在模板加载之前，该变量为 false。之后组件初始化并渲染 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
     }
   }
}

有什么方法可以让我们可以触发 Angular 变化检测，比如在点击事件或其他事件中，以便 Angular 可以更新 View ？

Answer 1

首先，您使用 ngClass 的方式是错误的。 ngClass 的左侧应该是类名，右侧应该是 bool 值。例如。

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

要在值更改时更新 View ，可以使用 ChangeDetectorRef 在构造函数中注入(inject)此类，然后使用方法 markForCheck()。此方法更新 View 。

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