代码之家 › 专栏 › 技术社区 › Jacopo Sciampi

组件更新问题

typescript angular

0

Jacopo Sciampi · 技术社区 · 7 年前

changeDetection: ChangeDetectionStrategy.OnPush

组件具有以下逻辑:

ngOnInit(){
  this.serivce.something
  .subscribe( evt => {
    // Logic that update values of the array (the logic works)
  });
}

html是这样的:

...
...
<div *ngFor="let item of myArray">
  <span *ngIf="item.showEye">TRUE</span>
  <span *ngIf="!item.showEye"> FALSE</span>
</div>
...
...

问题是,使用这种策略,即使我做了一些更改,它也不会呈现组件。这是执行编辑之前数组的外观:

注意showEye设置为true

编辑完成后:

如你所见 showEye

2 回复 | 直到 7 年前

1

Batajus 7 年前

要更新html,请尝试以下操作:

constructor(private cd: ChangeDetectorRef) {...}

ngOnInit(){
    this.serivce.something
        .subscribe( evt => {
            // Logic that update values of the array (the logic works)
            this.cd.detectChanges(); // Triggers a change detection run
    });
}

2

0

Eduardo Vargas 7 年前

变更检测策略 以及推送 . 主要的区别是OnPush只适用于 不变的 对象和数组。只有当它被传递给另一个引用时,OnPush的变化检测才会被触发。因此,它非常适用于可观察对象,因为您可以将变量的任何更改处理为“next”;在主题中,每次更改都返回一个新对象,而上一个对象被丢弃。

@Component({
  ....
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyOnPushComponent {
 person:Person = {
    name: 'Tom',
    age: 15
}

changeName(){
   this.person.name='Ralf'; // Doesnt triger the change detection of OnPush because it is the same reference (would be on default)
}



  changePerson(){
       this.person={
        name: 'Ted',
        age: 20
    }; // OnPush change detection is triggered because it refers to a new object
  }

}