I have the strange issue with component view rendering. Part of the component i work on looks like this:
<div [ngSwitch]="step">
<comp1 *ngSwitchCase="'step1'"></comp1>
<comp2 *ngSwitchCase="'step2'"></comp2>
</div>
Comp2 uses some shared component like this:
<ul>
<li *ngFor="let p of products">
{{p}}
<change-quantity [quantity]="p.quantity"
(quantityChanged)="onChangeQuantity(p,$event)">
</change-quantity>
</li>
</ul>
The problem i have is that <change-quantity> doesn't render the model changes if i init parent component with step = 'step2', but if i start from step='step1' and then go to step='step2' it works well.
Changing quantity looks like this:
onChangeQuantity(product, ev) {
product.quantity = ev;
}
I have found a workaround to use ngZone when changing product quantity model, but i think this is not the right way to do this. I'll be happy to find better way than triggering ngZone manually.
UPD: I tried to
- replace
*ngSwitchwith few*ngIfs - no success - tried to force change detection by recreating array like this(no success either):
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;
}
