2

I may or may not have found a bug in Angular 2. Basically what I'm trying to do is create a list of selected items of options chosen from a select box and when an item is selected it creates a new empty select box below the previous one so the user can continuously add selected items.

So what I want to do is reset the bottom select box back to an empty value, however when I try to set the ngModel value back to 0 (or empty) it still keeps the bottom select box at the previously selected option.

@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

The other odd thing is if I set entity.selected to say 'blue' instead of 0, then it will default the last select box to blue, but only on the first selection. Any selection after that it stays the same as the previous one.

https://plnkr.co/edit/Ze5uS1JjAmI7QXjQ17kQ

4

1 回答 1

3

[(ngModel)]将 2 路数据绑定 ( ) 与事件一起使用是非常糟糕的主意，(change)因为您无法预测/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;
    }
}
于 2016-12-15T21:17:39.267 回答