Trigger manually ngFor or making it update DOM correctly

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?

I would solve the problem by eliminating the pipe, and doing the filtering manually: update a filteredAllergies property each time a category is changed.

Thank you for your response.
I’ve resolved creating a new array with:

this.foodAllergies = […this.foodAllergies, res.data]

Instead of updating the existing one with this.foodAllergies.push(res.data)