动态创建和删除数据绑定模型输入答案

【问题标题】：Dynamically creating and removing data-bound model inputs动态创建和删除数据绑定模型输入
【发布时间】：2017-04-26 21:35:48
【问题描述】：

我有一个 Recipe 模型，其中包含一个 Flavors 数组。

export class Flavor {
    name: string;
    base: Base;

    removeFlavor(flavor: Flavor) : void {
        for (let f in this.flavors) {
            if (this.flavors[f][0] == flavor) {
                delete this.flavors[f];
            }
        }
    }
}

export class Recipe {
    strength: number;
    flavors: [Flavor, number][];
}

我正在尝试将这些可变数量的风味绑定到可以从配方中动态添加和删除的输入。 Angular 2 中是否有支持此功能的功能？这是我目前所拥有的：

<h3>Flavors</h3>

<div *ngFor="let flavor of mix.recipe.flavors" class="flavor">
    <label>Name</label>
    <input type="text" [(ngModel)]="flavor[0].name">

    <label>Strength <i>(percent)</i></label>
    <input type="number" [(ngModel)]="flavor[1]" min="0" max="1" step=".00001">

    <label>Base</label>
    <label *ngFor="let base of bases; let value = index;">
        {{ base }}
        <input type="radio" [checked]="value === flavor[0].base" (click)="flavor[0].base = value">
    </label>

    <a href="#" (click)="mix.recipe.removeFlavor(flavor)">Remove Flavor</a>
</div>

<a href="#" (click)="/* create new flavor */">New Flavor</a>

Remove Flavor 应该从Mix 中删除Flavor，并删除与之关联的整个div.flavor。 New Flavor 应该在Mix 中创建一个新的Flavor，并将一个新的绑定div.flavor 附加到列表的末尾。

【问题讨论】：

我不明白问题是什么或问题是关于什么的。使用(click)="xxx(...)"，您会调用xxx()，然后您可以从flavors 中删除该项目。 *ngFor 然后也会自动删除<div>。
@GünterZöchbauer 将mix.recipe.removeFlavor(flavor) 放入点击事件时，它会从配方对象中删除风味，但不会从标记中删除。

标签： angular angular2-template angular2-forms

【解决方案1】：

使用splice() 而不是delete

另见Deleting array elements in JavaScript - delete vs splice

【讨论】：