Question

我试图将类别名称作为组件模板中的字符串返回。该方法存储在给定数据模型的提供程序中。

例如：

     <div class="category">
            {{ vendorProvider.getCategoryName(vendor.category_id) }}
        </div>

在提供者中：

  getCategoryName(id) {
        return this.vendorCategories.find((x => x.id === id)).name;
    }

但我有时会收到诸如“无法阅读财产”这样的错误信息＆＃39;未定义的＆＃39;在操作供应商变量时，例如，在编辑表单中。在Angular模板绑定中使用方法的正确方法是什么？或者我如何从具有提供的类别ID的数组变量中检索类别名称？

Answer 1

您可以从函数返回对象，然后在模板中使用安全导航操作符

getCategoryName(id) {
     return this.vendorCategories.find((x => x.id === id));
}

模板中的

{{ vendorProvider.getCategoryName(vendor.category_id)?.name }}

Answer 2

这是因为this.vendorCategories有时没有值

改变你的功能

getCategoryName(id) {
    for (var i = 0; i < this.vendorCategories.length; i++) {
        if (this.vendorCategories[i] && this.vendorCategories[i].id === id) {
            return this.vendorCategories[i].id.name;

        }
    }
}

Angular2模板绑定中的方法

2 个答案: