Variable in template doesn't always update

@mathijsclaassen wrote:

Hi,

Situation: I have an array in a provider that holds a list of objects. In the constructor of the page class, I link providers array (this.database.jobs) to a local class array (this.items):

  constructor(public navCtrl: NavController,
    public navParams: NavParams,
    private database: DatabaseProvider) {
    this.items = this.database.jobs;
  }

This is the relevant part of the template:

  <ion-list>
    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
      {{item.name}}
    </button>
  </ion-list>

Scenario when testing in local browser (chrome via ionic serve):
1. Page loads and the template shows the correct items
2. I Update one item in this.database.jobs (in the background, not touching anything)
3. Template updates as expected
4. Update an item again in database.jobs
5. Template doesn't update

It does update if I click a button, resize the browserwindow or even log the value of this.items to console (see below) in the background.

  log() {
    setTimeout(() => {
      console.log(this.items);
      this.log();
    }, 3000);
  }

Anybody knows what's going on here? Is this a bug? Do I make a fundamental mistake? Any pointers on where to look are very much appreciated.

Thanks.

Posts: 1

Participants: 1

Read full topic