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

Question

我有一个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应该从Flavor中移除Mix并移除与之相关的整个div.flavor。 New Flavor应该在Flavor创建一个新的Mix，并在列表的末尾附加一个新的，绑定的div.flavor。

Answer 1

使用splice()而不是delete

另见Deleting array elements in JavaScript - delete vs splice