Angular 模板渲染后的变化检测

Question

所以我循环遍历 html 中的项目列表并将调用函数设置为 return 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
     }
   }
}

有什么方法可以触发 angular 更改检测，比如在点击事件或其他事件中，以便 angular 可以更新视图？

Answer 1

首先，您使用 ngClass 的方式不对。 ngClass 的左侧应该是 class 名称，右侧应该是布尔值。例如

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

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

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

Angular 模板渲染后的变化检测

Angular change detection after template render

html

javascript

render

angular-components

angular