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

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

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

希望这有帮助。

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

1 个答案: