Angular2 模板绑定中的方法

Question

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

例如：

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

在提供程序中：

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

但是在编辑表单中操作供应商变量时，我有时会遇到诸如"无法读取未定义的属性'名称'之类的错误。在 Angular 模板绑定中使用方法的正确方法是什么？或者，我还可以从具有提供的类别 ID 的数组变量中检索类别名称？

Answer 1

你可以从函数返回对象，然后在模板中使用安全导航运算符

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

在模板中

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