将变量传递到 [icon] 以使 Font Awesome 不起作用

Question

我在 Angular 中使用 Font Awesome。

我想通过*ngFor 循环访问一些数据以在导航栏中创建图标。但是，[icon] 不接受来自变量的值。

组件 HTML

<div class="navbar-container container" [ngClass] = "expanded ? 'navbar-collapsed': ''">
  <div class="navbar-logo-container">
    <button class="logo" (click)="toggleCollapsed()">
      A
    </button>
    <div class="logo-text" *ngIf="expanded">My Site</div>
  </div>
  <ul class="navbar-nav">
    <li class="navbar-nav-item" *ngFor="let data of navData">
      <a class="navbar-nav-link" [routerLink]="[data.routeLink]">

        //works
        <fa-icon [icon]="['fas','star']"></fa-icon> 

        //Error: Type 'string' is not assignable to type 'IconProp'.
        <fa-icon [icon]="data.iconfull"></fa-icon> 

        // Type 'string' is not assignable to type 'IconProp'.
        <fa-icon [icon]="[data.iconfirst,data.iconsecond]"></fa-icon> 

        <span class="navbar-link-text" *ngIf="expanded">{{data.label}}</span>
      </a>
    </li>
  </ul>
</div>

数据

export const navbarData = [
    {
        routeLink: 'dashboard',
        iconfirst: 'fas',
        iconsecond: 'star',
        iconfull: "['fas','star']",
        label: 'Dashboard'
    }
]

Answer 1

无法重现第三种情况。

来自IconProp，

export type IconProp = IconName | [IconPrefix, IconName] | IconLookup;

因此，对于第二种情况，

将navbarData 类型指定为：

import {
  IconProp,
  IconPrefix,
  IconName,
} from '@fortawesome/fontawesome-svg-core';

navbarData: {
  routeLink: string;
  iconfirst: IconPrefix;
  iconsecond: IconName;
  iconfull: IconProp;
  label: string;
}[] = [
  {
    routeLink: 'dashboard',
    iconfirst: 'fas',
    iconsecond: 'star',
    iconfull: ['fas', 'star'],
    label: 'Dashboard',
  },
];

Sample Demo on StackBlitz