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

Posted

技术标签:

【中文标题】如何发送在 Angular Material Autocomplete 中选择的属性的父对象?【英文标题】:How can I send the parent object for a property selected in the 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()”,它也会起作用

【问题讨论】:

【参考方案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

【讨论】:

以上是关于如何发送在 Angular Material Autocomplete 中选择的属性的父对象?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Angular-Material 获得全高侧导航

如何在angular2(material2)中设置小吃店的持续时间

HTML Angular Material:在动态形成的表格中隐藏列

如何有效地使用 Angular Material 自定义调色板颜色 Angular Material

Angular 2 Material - 如何居中进度微调器

Angular Material:如何将 floatPlaceholder 设置为从不