[英]Angular 6: how to access ALL option values in mat-autocomplete dropdown?
Given the example in the Angular docs you can see here and also repeated below, how can I access the rest of the object data in options
?鉴于 Angular 文档中的示例, 您可以在此处看到并在下面重复,如何访问options
的其余对象数据?
If for example, the object was more than just a simple list of names in key:value format, but something more complex such as data coming in from an API:例如,如果对象不仅仅是键:值格式的简单名称列表,而是更复杂的东西,例如来自 API 的数据:
dataObject = {
name: 'someName',
nameID: 'someId',
foo: 'bar'
}
The example in the docs is too simple and isn't telling me how to get the name
to display in the input field, and to also get the corresponding nameId
in the ts file needed to return a PUT request via the API.文档中的示例太简单了,并没有告诉我如何获取要在输入字段中显示的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>
component.ts:组件.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);
}
}
I think you're looking for the onSelectionChange option:我认为您正在寻找 onSelectionChange 选项:
You can simple add, to the mat-option:您可以简单地添加到 mat 选项:
(onSelectionChange)="setID(option.nameID)"
Everytime when you select a value this will be triggered.每次当你选择一个值时,这都会被触发。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.