angular - 无法读取属性 - displayWith

标签 angular

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

enter image description here

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

new-offer-form.component.ts:

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

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)"

关于angular - 无法读取属性 - displayWith,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49091255/

相关文章:

javascript - 如何将复选框设置为有条件选中

angular - 使用 angular 4 登录表单通过 IdentityServer 4 对应用程序进行身份验证

angular - 如何选择取消选择 PrimeNG 数据表中的行?

angular - 在 Angular 5 应用程序中导入第三方 js 库 cq-prolyfill 的正确方法

Angular 2 : Set and remove custom pipes?

javascript - Angular 引用错误 : Calling typescript function from html form or button

asp.net-mvc - 将 asp.net 服务器参数传递给 Angular 2 应用程序

angular - httpClient 的 http 操作总是单值 Observables 吗?它们能否以某种方式发出多个值?

Angular2如何在另一个组件中使用一个组件的功能

Javascript 不适用于移动设备,但适用于桌面,用于选项卡到四个 otp 框的下一个字段