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

【问题标题】：How can I send the parent object for a property selected in the Angular Material Autocomplete?如何发送在 Angular Material Autocomplete 中选择的属性的父对象？
【发布时间】：2018-04-03 09:02:05
【问题描述】：

我正在使用 Angular 4 Material，特别是 Autocomplete 组件。

我的选项列表 filteredHomeTeams 属于 Observable 类型，我正在使用名为 的此类对象的属性构建下拉列表和选择>团队名称

这是 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;
}

我需要做的，对于有经验的 Angular 程序员来说，这可能是非常基本的：

我在下拉列表中选择了 team.teamName，并且在输入字段中有 team.teamName。如何将同一对象中的 team.teamSelfRef 作为参数传递给“setHomeTeam()”？

我需要根据名称构建和选择对象，但我需要使用不同的属性触发逻辑。

如果我可以将整个对象作为参数传递给方法“setHomeTeam()”，它也会起作用

【问题讨论】：

标签： angular typescript angular-material angular-material2

【解决方案1】：

为什么不将每个选项值设置为一个团队：

[value]="team"

然后您可以传递整个团队对象。您必须为自动完成定义一个显示函数，以显示团队名称而不是团队对象：

<mat-autocomplete [displayWith]="displayFn" ...

在你的课堂上：

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

【讨论】：

【解决方案2】：

Alic W 是正确的，顺便说一句，文档中解释了这一点：Setting separate control and display values 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;
}

然后您可以从表单控件HomeTeamCtrl 访问完整的对象（包括teamSelfRef）属性：

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

这是来自文档及其变量的演示：https://plnkr.co/edit/zlKFIytpI6pokfZi3ofm?p=preview

【讨论】：