传递变量到[icon]字体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

无法重现第三种场景。

FromIconProp，

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',
},
];

StackBlitz的示例演示