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

Question

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

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。

Answer 1

使用 splice() 代替 delete

另见 Deleting array elements in JavaScript - delete vs splice

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

Dynamically creating and removing data-bound model inputs

angular2-forms

angular2-template

angular