Trigger manually ngFor or making it update DOM correctly

@Fringo wrote:

i have this code

TS

modal.onDidDismiss().then(res => {
  if (res.data !== undefined) {
    this.foodAllergies.push(res.data)
    if (this.categories.length === 0) {
      this.categories.push(res.data.category)
    } else {
      if (!this.categories.includes(res.data.category)) {
        this.categories.push(res.data.category)
      }
    }
  }
});

HTML

<ion-grid>
    <ion-row *ngFor="let category of categories">
      <ion-col>
        <h3>{{category}}</h3>
        <ion-list>
          <ion-item *ngFor="let food of foodAllergies | categoryFilter: category">
            <ion-label>{{food.name}}</ion-label>
          </ion-item>
        </ion-list>
      </ion-col>
    </ion-row>
  </ion-grid>

So whenever i add a new category to the categories array, the view updates correctly showing the foods that are in that category The problem is that when i add a category which is already present in the categories array, the view doesn’t update correctly because the second ngFor doesn’t trigger it doesn’t add the food with that category

How can i solve this problem?

Posts: 1

Participants: 1

Read full topic