Question

我正在使用angular2并且有一个像这样的HTML选择：

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

例如，让myList = [＆＃34; option1＆＃34;，＆＃34; option2＆＃34;，＆＃34; option3＆＃34;]

这一切都正常，直到allItems集合被更改。当用户第一次看到该页面时，他们选择＆＃34; option1＆＃34;作为他们的首选。现在javascript修改allItems集合并删除＆＃34; option1＆＃34;作为一个有效的选择。在他看来，Select没有显示任何内容。

我想要的是Select会显示第一个选项＆＃34; ALL＆＃34;如果Select的值不是AllItems集合中的已知值。

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

有人可以建议如何实现这个目标吗？

Answer 1

您可以尝试以下，

 import { Component }  from '@angular/core';

 @Component({
   selector: 'my-app',
   template: `<h3 class="title">Basic Angular 2</h3>
   <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。

以下是Plunker!!

希望这会有所帮助!!

angular2选项集合更改时选择绑定

1 个答案: