首页 文章

选择框的Angular 2 ngModel更改未更新所选选项

提问于
浏览 次
2

我可能会或可能没有在Angular 2中发现错误 . 基本上我要做的是创建从选择框中选择的所选项目的列表，当选择一个项目时，它会在下面创建一个新的空选择框 . 上一个，以便用户可以连续添加所选项目 .

所以我想要做的是将底部选择框重置为空值，但是当我尝试将ngModel值设置回0（或为空）时，它仍然将底部选择框保留在先前选择的选项中 .

@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，那么它将默认最后一个选择框为蓝色，但仅限于第一个选择 . 之后的任何选择都与前一个选择保持一致 .

https://plnkr.co/edit/Ze5uS1JjAmI7QXjQ17kQ

angular select ngmodel

1 回答

  • 2

    使用2路数据绑定（ [(ngModel)] ）与 (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;
    }
}
    回复于

相关问题