如何为Angular Material Autocomplete中选择的属性发送父对象？

Question

我正在使用Angular 4 Material,特别是Autocomplete组件.

我的选项列表filteredHomeTeams是Observable <Team []>类型,我正在构建下拉列表,并使用名为teamName的对象的属性进行选择

这是HTML:

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

正如您所看到的,我有一个名为optionSelected的事件,它调用方法setHomeTeam()

我的团队课程是:

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

我需要做什么,这对于经验丰富的角度程序员来说可能是非常基础的:

我在下拉列表中选择了team.teamName,输入字段中有team.teamName.如何将team.teamSelfRef从与参数相同的对象传递给"setHomeTeam()"？

我需要根据名称构建和选择对象,但我需要触发具有不同属性的逻辑.

如果我可以将整个对象作为参数传递给方法"setHomeTeam()",它也会工作

Answer 1

Alic W是正确的,这是在文档中解释的:设置单独的控制和显示值 Alic W代码的添加是如何获得所需的值.

正如Alic W所说,你将对象绑定到value:

[value]="team"

并添加displayWith:

<mat-autocomplete #homeAuto="matAutocomplete" 
                  [displayWith]="displayFn"  
                  (optionSelected)="setHomeTeam()">

的displayFn:

displayFn(team: Team): string {
    return team? team.teamName: team;
}

然后您可以teamSelfRef从表单控件访问完整对象(包括)属性HomeTeamCtrl:

setHomeTeam() {
  console.log(this.myControl.value.teamSelfRef)
}

以下是文档及其变量的演示:https://plnkr.co/edit/zlKFIytpI6pokfZi3ofm？p = preview