关于HTML：angular2选择绑定选项集合发生更改时


angular2 Select binding when options collection changes

我正在使用angular2并具有如下所示的HTML选择：

1
2
3
4
<select class="form-control" id="myList" [(ngModel)]="mySelectedItem">
    <option value="">{{"ALL" }}</option>
    <option *ngFor="let item of allItems" [value]="item">{{item}}</option>
</select>

例如，让myList = [" option1"，" option2"，" option3"]

在allItems集合更改之前，这一切都可以正常工作。首次向用户显示该页面时，他们选择" option1"作为其首选选项。现在，javascript修改allItems集合，并删除" option1"作为有效选项。在他看来，"选择"什么都不显示。

我想发生的是，如果Select的值不是AllItems集合中的已知值，则Select显示第一个选项" ALL"。

myList集合的值根据javascript中的其他逻辑自动更改。

有人可以建议如何实现吗？

相关讨论

您可以在下面尝试，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 import { Component }  from '@angular/core';

 @Component({
   selector: 'my-app',
   template: `<h3 class="title">Basic Angular 2
   <hr />
   <select class="form-control" id="myList" [(ngModel)]="mySelectedItem">
    <option value="all">{{"ALL" }}</option>
    <option *ngFor="let item of allItems" [value]="item">{{item}}</option>
   </select>
   <button (click)="updateLIst()">Update</button>
  `
 })
 export class AppComponent {
   mySelectedItem= 'all'
   allItems  = ["option1","option2","option3"];
   constructor(){}

   updateLIst(){
     this.allItems  = ["option2","option3"];
     this.mySelectedItem = 'all';
   }
 }

在allItems更改的任何地方，在Java脚本代码中将mySelectedItem设置为all。

这是大笨蛋！

希望这会有所帮助！