Question

所以我循环遍历html中的项目列表并设置调用函数返回true或false以便我可以应用各自的类，同时我也设置变量（如果有的话） item在列表中匹配。我将此变量用作另一个元素* ngIf。最初，在加载模板之前，此变量为false。之后，组件初始化并呈现html。现在，我在那里调用一个函数列表的循环，它将该变量设置为true，但是用ngIf调节的元素不可见。

我认为这是因为当组件完全初始化时，变量值为false，然后当html呈现变量时，值变为true。但是角度不会检测到这种变化，因为它已经渲染了该元素，并且没有得到任何变化事件来监视变量。

这是我的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
     }
   }
}

有没有办法让我们可以触发角度变化检测，就像在点击事件或soemthing中那样，角度可以更新视图？

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.
}

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

1 个答案: