如何发送在 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 中选择的属性的父对象?的主要内容,如果未能解决你的问题,请参考以下文章
如何在angular2(material2)中设置小吃店的持续时间
HTML Angular Material:在动态形成的表格中隐藏列
如何有效地使用 Angular Material 自定义调色板颜色 Angular Material