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

Question

I have a dropdown like below

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"}

What I'd like to do is when the user clicks on 'Create Team' the previous values(t1:team1 or t2:team2) remain same, while I create a new team by form, etc.

How do I get reference to the select element so that I can change [value] to the previous value?

So far I have this:

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

If I could only reference the select element and set the [value] to selectedTeam or just change the selected value from the component without a direct reference, I would be able to do this. How do I achieve this?

Answer 1

If you take a look at the API docs for the select , you can see that MatSelect is exported as matSelect . This means that you can get a reference to the select in the template by writing #t="matSelect" . If you then pass this #t into your function, you can update the select's value like this:

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

Hope this helps.