Angular ngFor 动态添加对象

Question

请查看视频：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);
    }
}

Answer 1

你打错了。您的范围内没有 index（在 ngFor 内）。

将name="colorSetQ-{{index}}"更改为name="colorSetQ-{{k}}"

和

name="colorSetPrice-{{index}}" 到 name="colorSetPrice-{{k}}"

Angular ngFor 动态添加对象

Angular ngFor with dynamic adding of objects

angular

angular-forms

angular8

angular-arrays