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

我有一个组件视图渲染的奇怪问题,我工作的部分组件是这样的。

<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 手动。

更新:我试着用

  1. 替换 *ngSwitch 寥寥无几 *ngIfs – 没有成功
  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;
  }

解决方案:

我敢打赌,我的一个组件是这样的:… products 数组被更新而不更新引用。这里是 解释了可能的解决办法。

给TA打赏
共{{data.count}}人
人已打赏
未分类

HighChart图例我覆盖了鼠标移动,但却失去了透明功能。我如何保留它?

2022-9-26 16:41:22

未分类

从for-loop的C#中对结果进行分组

2022-9-26 16:52:20

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索