mat-autocomplete选项无法找到属性

Question

我试着用这个代码做自动完成。

现在，问题是我接收选项为[object objecct]，我理解这是因为我需要指定像option.name这样的字段，但是当我获得does not exist error时。要检查I选项是否为空，我打印它。像下面的

private _filter(value: string): string[] {
if (value && value !== '') {
const filterValue = value.toLowerCase();
console.log('this',options)
return this.options.filter(
(option) =>
option.name.toLowerCase().includes(filterValue) ||
option.clock.toString().startsWith(filterValue)
);
} else {
return [];
}

输出:

输入图片描述

注意:我的代码几乎与上面的参考相同，只是我从另一个数组映射特定的字段。

retrieveAbsence():void{
this.employeeService.getAll()
.subscribe(
data => {
this.employee = data;
console.log(data);
},
error => {
console.log(error);
});
}

this.options = this.employee.map(((i) => {
return {
id: i.id,
clock: i.clock,
payroll:i.payroll,
name: i.firstName+' '+i.surName
}}));

输出:James Smith

Answer 1

也尝试使用{{option['name]}}来获得[value]="option['name']"所需的值

Answer 2

您正在使用下拉项的值作为对象，但是您需要一个字符串。把[value]="option"改成[value]="option.name"

<mat-option
*ngFor="let option of filteredOptions | async"
[value]="option"
>
{{option.name}}
</mat-option>

<mat-option
*ngFor="let option of filteredOptions | async"
[value]="option.name"
>
{{option.name}}
</mat-option>

Answer 3

在mat-option中，值应为option.name而不是完整的对象。当您从对象数组中进行筛选时。你应该把单个值赋给value，而不是整个对象。

<mat-option *ngFor="let option of filteredOptions | async[value]="option.name">
{{option.name}}