ngFor Not Updating

Ionic Framework ionic-v3
22

i have seen that behavior also… i believe there are some issues in the RC0 release

2 Likes
23

Same issue for me. Have you found any reasoning?

24

I found a similar problem in my code (RC0 release).
####service.ts
private updated = new BehaviorSubject(false);
updated$ = this.updated.asObservable();
…

update() {
  this.updated.next(true);
}

initListeners() {
  this.myObject.on('chat', c => {
        console.log('onChat', c);
        this.update();
  });
}

In another class I subscribe to the Observable and update an array which is looped through using ngFor.
####chat-list.ts

subscription:Subscription;
constructor(
    public navCtrl: NavController,
    private service: MyService
  ) {}
  
  ngOnInit() {
    this.subscription = this.service.updated$
       .subscribe(updated => this.chatList = updated ? this.service.getChatList() : []);
  }
  
  ngOnDestroy() {
    // prevent memory leak when component is destroyed
    this.subscription.unsubscribe();
  }

####chat-list.html
<ion-content *ngIf=“chatList”>

Today
<chat-list-item *ngFor=“let chat of chatList” (click)=“openChat(chat)”
[chat]=“chat”>

In my case, the array would successfully update but the view in the ngFor loop would not be updated unless some other action eg. click, triggered an update.
After searching and doing quite a bit of reading and landing here I realized in my case it was due to the call back being run within the javascript object (myObject) which was attached to my service. In a case such as this, it is vital that zone.run( is used to ensure that the procedure call is made in the Angular zone to ensure updates propogate to DOM view changes.

####service.ts (edited)
constructor(private zone: NgZone) {
}
…
this.myObject.on(‘chat’, c => {
console.log(‘onChat’, c);
this.zone.run(() => this.update());
});