如何使用 Angular [ngClass] 从 JSON 文件绑定类名

Question

我有一个json文件包含一个像这样的图标对象：

"icons" : {
        "logo" : "fa fa-caret-down",
        "search" : "fas fa-search",
        "bell" : "far fa-bell"
    }

在我的 component.ts 中，我能够使用如下所示的服务成功获取此图标对象：

navIcons: object;
   getNavIcons(): void {
    this.navbarService.getNavIcons()
    .subscribe(navIcons => {
      this.navIcons = navIcons;
      console.log(this.navIcons)
    //   icons : {
    //     logo : "fa fa-caret-down",
    //     search : "fas fa-search",
    //     bell : "far fa-bell"
    // }
    });
  }

如何在组件.html模板中绑定类？我试过这样：

 <i id="logo" [ngClass]="['navIcons.logo']" class="nav-icon"></i>

但它失败了。我还有另一个小牛：导航图标需要添加到这个徽标中吗？提前谢谢你！

Answer 1

试试这个 ngClass 语法：

[ngClass]="navIcons?.logo"

由于最初navIcons undefined，因此使用安全导航运算符?.来防止尝试访问 logo 属性时出现异常。