无法读取属性 - displayWith

Question

当我从自动填充列表中选择建议的商品时，我收到此错误：

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

新报价-form.component.ts：

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

新报价-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>
...

Answer 1

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

用[displayWith]="foodItemName.bind(this)"

替换