Запустить вручную ngFor или заставить его корректно обновить DOM - PullRequest
Новая
       32

Запустить вручную ngFor или заставить его корректно обновить DOM

0 голосов
/ 27 апреля 2020

у меня есть этот код

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>

Поэтому, когда я добавляю новую категорию в массив категорий, представление обновляется правильно отображать продукты, относящиеся к этой категории. Проблема в том, что когда я добавляю категорию, которая уже присутствует в массиве категорий, представление не обновляется корректно, потому что второй ngFor не запускает, он не добавляет продукт с что категория

Как я могу решить эту проблему?

1 Ответ

0 голосов
/ 27 апреля 2020

Ваши if() { ... } else { if() { ... } } делают то же самое, я нахожу это странным.

Попробуйте обновить foodAllergies способом immutable (изменив ссылку) и посмотрите, помогает ли это и запускает обнаружение изменений . 

modal.onDidDismiss().then(res => {
  if (res.data !== undefined) {
    this.foodAllergies = [...this.foodAllergies.map(foodAllergy => ({...foodAllergy})), res.data];
    this.foodAllergies.push(res.data);
    // you can keep your if and else if but I have removed them here for this example
    this.categories.push(res.data.category);
   }
  }
});

Для ...this.foodAllergies.map(foodAllergy => ({...foodAllergy})), в зависимости от того, сколько глубоко вложенных объектов / массивов у вас в foodAllergy, вы должны их постоянно копировать.

Так скажем, если foodAllergy выглядит как { name: 'Peanuts', x: [1, 2, 3], y: { a: 1, b: 2 } }, он станет: 

...this.foodAllergies.map(foodAllergy => ({
                                            ...foodAllergy, 
                                            x: [...foodAllergy.x], 
                                            y: {... foodAllergy.y } 
                           }))
...