在使用mat-autocomplete select组件时,可以通过设置显示名称的同时获取其他属性的值。以下是一种实现方法:
names = [
{ name: 'John', age: 25, gender: 'Male' },
{ name: 'Jane', age: 30, gender: 'Female' },
{ name: 'Bob', age: 35, gender: 'Male' }
];
<mat-form-field>
<input type="text" matInput [matAutocomplete]="auto" [(ngModel)]="selectedName">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="getOptionValue($event)">
<mat-option *ngFor="let name of filteredNames" [value]="name.name">
{{ name.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
filteredNames: any[];
selectedName: string;
filterNames() {
this.filteredNames = this.names.filter(name => name.name.toLowerCase().includes(this.selectedName.toLowerCase()));
}
getOptionValue(event: MatAutocompleteSelectedEvent) {
const selectedName = event.option.value;
const selectedObject = this.names.find(name => name.name === selectedName);
console.log(selectedObject.age); // 输出选中选项的年龄属性值
console.log(selectedObject.gender); // 输出选中选项的性别属性值
}
<input type="text" matInput [matAutocomplete]="auto" [(ngModel)]="selectedName" (input)="filterNames()">
这样,当用户在输入框中输入名称时,会根据输入的值过滤名称列表,并显示匹配的选项。当用户选择一个选项时,可以通过getOptionValue函数获取该选项的其他属性的值。
对于腾讯云相关产品和产品介绍链接地址,由于不能提及具体的品牌商,建议你参考腾讯云官方文档或咨询腾讯云的客服人员,以获取相关信息。
领取专属 10元无门槛券
手把手带您无忧上云