angular - Angular8+ ngswitch 嵌套组件不更新视图

Question

我对组件视图渲染有一个奇怪的问题。我处理的部分组件如下所示：

<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'然后转到step='step2'它则效果很好。更改数量如下所示：

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

我找到了ngZone更改产品数量模型时使用的解决方法，但我认为这不是正确的方法。我很乐意找到比ngZone手动触发更好的方法。

UPD：我试着

1. *ngSwitch用几个s替换*ngIf- 没有成功
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;
  }

Answer 1

我敢打赌products数组会在不更新引用的情况下更新。 这里解释了可能的解决方案。