角2 ngModel更改选择框不更新选定的选项

Question

我可能也可能没有找到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说“蓝色”，而不是0，则默认的最后一个选择框为蓝色，但只有第一选择。任何选择后，它保持与前一个相同。

https://plnkr.co/edit/Ze5uS1JjAmI7QXjQ17kQ

Answer 1

这是非常糟糕的主意，使用2路数据绑定（[(ngModel)]）与(change)事件，你无法预测/角无法控制动作将被优先处理。所以你必须重写你的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; 
    } 
}