我对组件视图渲染有一个奇怪的问题。我处理的部分组件如下所示:
<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:我试着
*ngSwitch
用几个s替换*ngIf
- 没有成功- 试图通过像这样重新创建数组来强制更改检测(也没有成功):
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;
}