如何从Angular2的组件中更改选择选项？

Question

我有一个如下所示的下拉列表

html

<mat-form-field>
  <mat-select placeholder="Team" [(ngModel)]="selectedTeam" name="team"
              (change)="mainValuesChanged('team',$event,t.value)" #t>
      <mat-option *ngFor="let team of teams" [value]="team.value"  >
      {{ team.viewValue }}
      </mat-option>
  </mat-select>
</mat-form-field>

ts

selectedTeam="team1"
teams = {"value":"t1","viewValue":"team1",
         "value":"t2","viewValue":"team2",
         "value":"newTeam",""viewValue":"Create Team"}

我想做的是，当用户单击“创建团队”时，以前的值（t1：team1或t2：team2）保持不变，而我通过表单创建新团队等。

如何获得对select元素的引用，以便可以将[value]更改为先前的值？

到目前为止，我有这个：

mainValuesChanged(term,event:MatSelectChange,tValue){
    if (event.value==="newTeam"){
        this.selectedTeam = getPrevTeamNamefromAService();
        #hack, hack 
    }
}

如果我只能引用select元素并将[value]设置为selectedTeam，或者仅从组件中更改选择的值而无需直接引用，则可以做到这一点。 我该如何实现？

Answer 1

如果看一下select的API文档，则可以看到MatSelect导出为matSelect 。 这意味着您可以通过编写#t="matSelect"来引用模板中的选择。 如果随后将此#t传递给函数，则可以像下面这样更新select的值：

mainValuesChanged(term, event:MatSelectChange, select: MatSelect){
    if (event.value==="newTeam"){
        select.writeValue(getPrevTeamNamefromAService());
    }
}

希望这可以帮助。