Question

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

的数组

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

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

1 个答案: