Angular如何从JSON动态设置fa-icon的[icon]属性？

你直接绑定featureItem.mainIcon的字符串值是不行的，因为fa-icon的[icon]属性需要的是从@fortawesome导入的图标对象，而非字符串。你的JSON里存的是组件内变量名（比如"reactAtom"），需要把这些变量整理成可通过字符串key访问的映射对象，再完成绑定。

第一步：修改TS组件，创建图标映射对象 #

把原本单独定义的图标变量，统一放到一个对象中，这样就能通过字符串key获取对应的图标对象：

import { Component, Input, OnInit } from '@angular/core';
import {faReact} from '@fortawesome/free-brands-svg-icons';
import {faPeopleGroup, faBullseye, faHeart,faCaretUp, faCaretDown} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-features-item',
  templateUrl: './features-item.component.html',
  styleUrls: ['./features-item.component.scss']
})
export class FeaturesItemComponent implements OnInit {
  @Input() featureItem:any;
  
  // 所有图标统一存入映射对象
  iconMap = {
    reactAtom: faReact,
    peopleGroup: faPeopleGroup,
    bullseye: faBullseye,
    heart: faHeart,
    caretDown: faCaretDown,
    caretUp: faCaretUp
  };

  constructor() { }

  ngOnInit(): void {
  }

}

第二步：修改HTML模板的绑定逻辑 #

通过iconMap[featureItem.mainIcon]获取对应图标对象，同时可以把图标样式类也改成动态绑定：

<div>
    <!-- 动态绑定图标和样式类 -->
    <fa-icon [icon]="iconMap[featureItem.mainIcon]" [class]="featureItem.mainIconClass"></fa-icon>
    <h3>{{featureItem.name}}</h3>
    <p class="card-title-features">{{featureItem.description}}</p>
    <hr class="line-separator">
    <accordion closeOthers="true" *ngFor="let accGroup of featureItem.accorditions">
        <accordion-group [isOpen]="false" #accordionGroupRef>
            <span accordion-heading style="display:flex;justify-content:space-between;align-items:center">
                <div>
                    <fa-icon [icon]="iconMap[accGroup.icon]"></fa-icon> <span class="card-title-accordtion">{{accGroup.accorditionTitle}}</span>
                </div>
                <fa-icon *ngIf="accordionGroupRef.isOpen" [icon]="iconMap.caretDown"></fa-icon>
                <fa-icon *ngIf="!accordionGroupRef.isOpen" [icon]="iconMap.caretUp"></fa-icon>
            </span>
            <p>{{accGroup.accordtitionDescription}}</p>
        </accordion-group>
    </accordion>
</div>

原写法失效的原因 #

你之前写的[icon]="[featureItem.mainIcon]"是把字符串包装成数组传递，而fa-icon需要单个图标对象；就算去掉数组括号，直接[icon]="featureItem.mainIcon"也只是传递了字符串（比如"reactAtom"），并非组件内定义的reactAtom图标对象，因此组件无法识别渲染。

内容的提问来源于stack exchange，提问作者Pedro Henrique Ferreira