如何将Angular Material自动完成中的值分配给组件中的变量？

Question

I'm building a form to create a POST to the API. I'm using Angular Material 4 and I'm using the Autocomplete component provided by Material Design.

Here is my HTML Component:

<mat-form-field class="example-full-width">
            <input type="text" matInput placeholder="Local" [formControl]="HomeTeamCtrl" [matAutocomplete]="homeAuto">
            <mat-autocomplete #homeAuto="matAutocomplete">
                    <mat-option *ngFor="let team of filteredHomeTeams | async" [value]="team.teamName">
                        {{ team.teamName }}
                    </mat-option>
            </mat-autocomplete>
</mat-form-field>

Which is working fine, I'm able to type in and filter the results, then if I select the item from the list, It is entered in the input field and remains there.

As you can see, I'm filtering the list based on a property of the object Team, which comes from an array of Team[].

This object has other values of course and what I need to do is that When I select a value from my Autocomplete list of options, then it should call a method using that same object to take a string in a property, parse it and assign it to a variable.

Here is my team class:

export class Team {
    teamName: string;
    selfLink: string;
}

This is the initial Array:

"teams": [{
     "teamName": "River";
     "selfLink": "http://localhost:4200/teams/1"
   },
   {
     "teamName": "Boca";
     "selfLink": "http://localhost:4200/teams/2"
   }]

I create the initial array:

ngOnInit(){
    this.match = new Match;
    this.availableTeams = [];
    this.getTeams();
    this.HomeTeamCtrl = new FormControl();
    this.filteredHomeTeams = this.HomeTeamCtrl.valueChanges
        .startWith(null)
        .map(team => team ? this.filterTeams(team) : this.availableTeams.slice());
  }

getTeams() {
    this.teamService.getTeamsList()
      .subscribe(
        teams => this.availableTeams = teams,
        error => console.log(error)
      );
  }

filterTeams(name: string) {
    return this.availableTeams.filter(team =>
      team.teamName.toLowerCase().indexOf(name.toLowerCase()) === 0);
  }

All of this is working. Now as you can see, I have a "match" object that I need to complete to push it and so here comes my question.

How do I proceed to do the following:

When I select a team name from my list of options in the Autocomplete, the string in the "selfLink" for that object should be parsed and assign the ID (last number) to this.match.homeTeam

Answer 1

The easiest way is to bind to the md-option (onSelectionChange) and assign the local variable there.

<mat-option *ngFor="let team of filteredHomeTeams | async" [value]="team.teamName" (onSelectionChange)="match.homeTeam = team.selfLink">

or call a function in your component

**.html**
<mat-option *ngFor="let team of filteredHomeTeams | async" [value]="team.teamName" (onSelectionChange)="parseHomeTeam(team)">

**.component**
parseHomeTeam(team: Team) {
  // parse team logic here
}