![](/img/trans.png)
[英]How to detect mat-autocomplete option is selected in Angular?
[英]Angular 6: how to access ALL option values in mat-autocomplete dropdown?
鉴于 Angular 文档中的示例, 您可以在此处看到并在下面重复,如何访问options
的其余对象数据?
例如,如果对象不仅仅是键:值格式的简单名称列表,而是更复杂的东西,例如来自 API 的数据:
dataObject = {
name: 'someName',
nameID: 'someId',
foo: 'bar'
}
文档中的示例太简单了,并没有告诉我如何获取要在输入字段中显示的name
,以及如何获取通过 API 返回 PUT 请求所需的 ts 文件中的相应nameId
。
<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Assignee" aria-label="Assignee" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{option.name}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
组件.ts:
export class AutocompleteDisplayExample implements OnInit {
myControl = new FormControl();
options: User[] = [
{name: 'Mary'},
{name: 'Shelley'},
{name: 'Igor'}
];
filteredOptions: Observable<User[]>;
ngOnInit() {
this.filteredOptions = this.myControl.valueChanges
.pipe(
startWith<string | User>(''),
map(value => typeof value === 'string' ? value : value.name),
map(name => name ? this._filter(name) : this.options.slice())
);
}
displayFn(user?: User): string | undefined {
return user ? user.name : undefined;
}
private _filter(name: string): User[] {
const filterValue = name.toLowerCase();
return this.options.filter(option => option.name.toLowerCase().indexOf(filterValue) === 0);
}
}
我认为您正在寻找 onSelectionChange 选项:
您可以简单地添加到 mat 选项:
(onSelectionChange)="setID(option.nameID)"
每次当你选择一个值时,这都会被触发。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.