更改检测策略 onpush 不起作用

Question

Parent.component.html

<app-child [activeUser]="activeUser"  *ngIf="eceConfirm && activeUser"></app-child>

Parent.component.ts In ngOnInit I called getAllEmployees to get all the employee data and passed 0th index data to the child component using @Input() activeUser.

 getAllEmployees() {
    this.service
      .getCommonEmployeesDetail(this.user["uid"], this.selectedRatingCycleId)
      .subscribe((res) => {
        this.userList = res;
        this.changeUser(this.userList[0]);
      });
  }

  changeUser(user) {
    console.log("user", user);
    this.activeUser=user;
  }

Child.component.ts

I have implemented changeDetection.Onpush strategy in my child component. After getting my activeUser data I am passing it in the changeChildUser() method to fetch data from a request and assigning it to the this.cycleData.

The problem which I am facing 1.When I try to print {{cycleData.Englishmarks}} in HTML page doesn't get refreshed. I consoled this.cycleData and it was displaying the value in the console.

Any idea what might be the problem.Any input is appreciated.Thanks in advance

 @Input() activeUser: BpuData;

ngOnChanges(changes: SimpleChanges) {
this.changeChildUser();
}



changeChildUser() {
    this.chapterService.getcycle(this.activeUser).subscribe(response =>{
         this.cycleData=response;
});  
      }

Answer 1

That's because detection is changed only when an input is changed in the OnPush components.

You have to either detect changed manually:

changeChildUser() {
    this.chapterService.getcycle(this.activeUser).subscribe(response =>{
         this.cycleData=response;
         this.cdr.detectChanges();
    });  
}

Or you async pipe as @Maxime already commented.

PS: Always remember to unsubscribe on the destroy.

Answer 2

The best solution for OnPush components is to use markForCheck() . detectChanges() also solves the problem, but it can create a performance problem since it triggers other components in the tree.

https://angular.io/api/core/ChangeDetectorRef#markForCheck

constructor(private cd: ChangeDetectorRef) {}

---

this.chapterService.getcycle(this.activeUser).subscribe(response => {
  this.cycleData = response;
  this.cd.markForCheck();
});

I prepared an example close to your project.

https://stackblitz.com/edit/angular-ivy-duuj5y

If you want to understand exactly what happened, here's a very good explanation.

https://stackoverflow.com/a/41364469/6478359