Angular 2 select 框的 ngModel 更改未更新 selected 选项

Question

我可能在 Angular 2 中发现了错误，也可能没有。基本上，我想做的是创建一个 selected 选项列表，这些选项选自 select 框，当一个项目被 selected 时，它会在前一个 select 框下方创建一个新的空 select 框，这样用户就可以连续添加 selected 项目。

所以我想做的是将底部 select 框重置回空值，但是当我尝试将 ngModel 值设置回 0（或空）时，它仍然保持底部 select 框在先前 selected 选项。

@Component({
    selector: 'my-app',
    template: `
    <div *ngFor="let a of arr">
        <div *ngFor="let b of a.entities;let i = index">
            <select class="form-control input-sm" [(ngModel)]="a.entities[i]">
                <option *ngFor="let c of items" value="{{c}}">{{c}}</option>
            </select>
        </div>
        <select class="form-control input-sm mb5" (change)="entitySelect(a)" [(ngModel)]="a.selected">
            <option value="0">- Select -</option>
            <option *ngFor="let c of items" value="{{c}}">{{c}}</option>
        </select>
    </div>
    `,
})
export class App {
    items:Array<string> = ['red','green','blue'];
    constructor() {
        this.arr = [{
            entities: [],
            selected: 0
        }]
     }
     entitySelect(entity) {
         entity.entities.push(entity.selected);
         entity.selected = 0; // Revert bottom select box back to empty
     }
}

https://plnkr.co/edit/PMzbgEtyd4DFhObu1UVz

另一件奇怪的事情是，如果我将 entity.selected 设置为 'blue' 而不是 0，那么它将默认最后一个 select 框为蓝色，但仅在第一个 select离子。之后的任何 selection 都与前一个相同。

https://plnkr.co/edit/Ze5uS1JjAmI7QXjQ17kQ

Answer 1

对 (change) 事件使用 2 路数据绑定 ([(ngModel)]) 是非常糟糕的主意，因为您无法 predict/Angular 无法控制首先处理的操作。所以你必须重写你的 entitySelect 函数来手动给 entity\a 赋值。第二点有完全相同的原因......对我有用的例子：

@Component({
selector: 'my-app',
template: `
    <div *ngFor="let a of arr">
        <div *ngFor="let b of a.entities;let i = index">
            <select class="form-control input-sm" [(ngModel)]="a.entities[i]">
                <option *ngFor="let c of items" value="{{c}}">{{c}}</option>
            </select>
        </div>
        <select class="form-control input-sm mb5" (change)="entitySelect($event, a)" [ngModel]="a.selected">
            <option value="0">- Select -</option>
            <option *ngFor="let c of items" value="{{c}}">{{c}}</option>
        </select>
    </div>
`,
})
export class App {
    name:string;
    items:Array<string> = ['red','green','blue'];
    constructor() {
        this.name = 'Angular2'
        this.arr = [{
            entities: [],
            selected: 0
        }]
    }
    entitySelect($event, entity) {
        entity.entities.push($event.target.value);
        $event.target.value = 0;
    }
}

Angular 2 select 框的 ngModel 更改未更新 selected 选项

Angular 2 ngModel change of select box not updating selected option

select

ngmodel

angular