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

Question

我正在构建一个表单来为API创建一个POST.我正在使用Angular Material 4,而我正在使用Material Design提供的Autocomplete组件.

这是我的HTML组件:

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

哪个工作正常,我可以输入并过滤结果,然后如果我从列表中选择项目,它将输入到输入字段并保留在那里.

如您所见,我基于对象Team的属性过滤列表,该属性来自Team []的数组.

这个对象当然还有其他值,我需要做的是当我从我的自动完成选项列表中选择一个值时,它应该使用同一个对象调用一个方法来获取属性中的字符串,解析它并分配它变量.

这是我的团队课程:

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

这是最初的数组:

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

我创建了初始数组:

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);
  }

所有这些都有效.现在你可以看到,我有一个"匹配"对象,我需要完成推送它,所以这是我的问题.

如何继续执行以下操作:

当我从自动填充中的选项列表中选择团队名称时,应解析该对象的"selfLink"中的字符串,并将ID(最后一个数字)分配给this.match.homeTeam

Answer 1

最简单的方法是绑定md-option (onSelectionChange)并在那里分配局部变量.

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

或者调用组件中的函数

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

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