无法读取属性-displayWith [英] Cannot read property - displayWith

问题描述

当我从自动完成列表中选择建议的报价时，出现此错误:

When I select a suggested Offer from the autocomplete list I get this error:

我认为 displayWith 仅用于显示项目的字符串，不确定不确定时如何访问 name 属性，以及为什么错误仅在我出现时出现在列表中选择一个项目.但是，我没有任何功能问题，只是给了我浏览器控制台中的错误.

I thought displayWith is just used to display the string of the items, not sure how name property was accessed when it is undefined and why the error only occurred when I select an item in the list. However, I don't have any functionality issues, its just giving me errors in the browser's console.

new-offer-form.component.ts:

new-offer-form.component.ts:

...
foodItemName(offer?: Offer): string | undefined {
    return offer ? offer.foodItem.name : undefined;
}
...

new-offer-form.component.html:

new-offer-form.component.html:

...
<mat-autocomplete #auto="matAutocomplete" [displayWith]="foodItemName" (optionSelected)='assign($event.option.value)'>
    <mat-option *ngFor="let offer of filteredOffers$ | async" [value]="offer">{{ offer.foodItem.name }}</mat-option>
</mat-autocomplete>
...

推荐答案

您的范围在 [displayWith] ="foodItemName" 内未定义！

将其替换为 [displayWith] ="foodItemName.bind(this)"

这篇关于无法读取属性-displayWith的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！