代码之家 › 专栏 › 技术社区 › Manzur Khan

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

angular-components render angular html javascript

Manzur Khan · 技术社区 · 6 年前

因此,我在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可以更新视图?

1 回复 | 直到 6 年前

Sumeet Kale 6 年前

首先,您以错误的方式使用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.
}

推荐文章

nightingale2k1 · 角度5亲子沟通

6 年前

A T · 带角度材质的垂直选项卡

6 年前

Nexeuz · angular heroes教程主/详图构件。为什么英雄的父母会改变?

6 年前

Jefferson Costa · 如何将元素范围限制在角度5上?

6 年前

newman · 如何将HTTP Angular 4/5请求绑定到html?

6 年前

JordanBarber · Angular 4 FormGroup-将父窗体控件传递给子组件

6 年前

David Fregoli · 如何在降级的角度组件上实现ControlValueAccessor

6 年前

Chris Barr · 动态选择ng模板

6 年前

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

6 年前

Gustav · Angularjs组件,通过函数传递单向绑定是反模式吗?

6 年前