动态添加对象的角度ngfor

上周五我又发了一个类似的问题,但是我没有得到正确的建议,我希望这次我能解决我的问题。

请检查视频: https://screencast-o-matic.com/watch/cqQQj2tA22

我正在将动态对象添加到数组中,并希望在添加对象后设置值。 现在,当我向数组添加新对象时,循环中的所有输入文本框都将重置文本框中显示的值,尽管数组在代码中保留正确的属性。

这是我的标记:

<div *ngFor="let colorSet of quantity.colorSets; let k=index;">
    <div>
        <label>Color Sets:</label>
        <div>
            <mat-form-field>
                <input matInput [(ngModel)]="quantity.colorSets[k].setQ" value="{{quantity.colorSets[k].setQ}}" name="colorSetQ-{{index}}" type="text">
            </mat-form-field>
        </div>
    </div>
    <div>
        <label>Price:</label>
        <div>
            <mat-form-field>
                <input matInput [(ngModel)]="quantity.colorSets[k].price" value="{{colorSet.price}}" name="colorSetPrice-{{index}}" type="text">
            </mat-form-field>
        </div>
    </div>
</div>

然后是代码:

model: any = {
    TenantId: '',
    CustomFieldName: '',
    quantities: []
};

newQuantity = {
    price: '',
    rangestart: '',
    rangeend: '',
    colorSets: []
};

colorSetInfo = {
    setQ: '',
    price: ''
}

addNewPriceSet(quantitySet) {
    if (quantitySet) {
        quantitySet.colorSets.push({
            setQ: '',
            price: ''
        });
        console.log(quantitySet);
        console.log(this.model);
    }
}

非常感谢你的帮助,拉齐亚尔