Вложенный компонент Angular8 + ngswitch не обновляет представление - PullRequest
Новая
       33

Вложенный компонент Angular8 + ngswitch не обновляет представление

1 голос
/ 05 мая 2020

У меня странная проблема с рендерингом представления компонентов. Часть компонента, над которым я работаю, выглядит так: 

<div [ngSwitch]="step">
  <comp1 *ngSwitchCase="'step1'"></comp1>

  <comp2 *ngSwitchCase="'step2'"></comp2>
</div>

Comp2 использует некоторый общий компонент, например: 

<ul>
  <li *ngFor="let p of products">
    {{p}}
    <change-quantity [quantity]="p.quantity" 
                     (quantityChanged)="onChangeQuantity(p,$event)">
    </change-quantity>
  </li>
</ul>

У меня проблема в том, что <change-quantity> не отображает модель изменяется, если я инициализирую родительский компонент с помощью step = 'step2', но если я начинаю с step='step1', а затем с go до step='step2', он работает хорошо. Изменение количества выглядит следующим образом: 

onChangeQuantity(product, ev) {
  product.quantity = ev;
}

Я нашел обходной путь для использования ngZone при изменении модели количества продукта, но я думаю, что это неправильный способ сделать это. Я буду рад найти способ лучше, чем запускать ngZone вручную.

UPD: я пытался

  1. заменить *ngSwitch несколькими *ngIf s - безуспешно
  2. попытался принудительно обнаружить изменение, воссоздав такой массив (тоже безуспешно): 
  onChangeQuantity(product, ev) {
    let result = [];
    this.products.forEach((prod) => {
      if(prod.id === product.id) {
        prod.quantity = ev;
      }
      let p = JSON.parse(
        JSON.stringify({
          id: prod.id,
          default_addon: prod.default_addon,
          quantity: prod.id === product.id ? ev : prod.quantity
        })
      );
      result.push(p);
    });
    this.products = result;
  }

1 Ответ

0 голосов
/ 05 мая 2020

Бьюсь об заклад, products массив обновляется без обновления ссылки. Вот объяснение возможных решений.

...