Angular 在NativeScript视图中动态渲染字体图标

如果我尝试在NativeScript视图中渲染硬编码的图标，如下所示：

<Label class="fas" text="&#xf015;"></Label>

private buildMenuItems() {
        this.menuItems = [];
        this.menuItems.push({ title: 'Alerts', faIcon: '', url: '/alerts/list' });
        this.menuItems.push({ title: 'Properties', faIcon: '', url: '/properties/list' });
        this.menuItems.push({ title: 'Tenants', faIcon: '', url: '/tenants/list' });
        this.menuItems.push({ title: 'Accounting', faIcon: '', url: '/accounting/transactions/list' });
        this.menuItems.push({ title: 'Task Management', faIcon: '', url: '/todos/list' });
        this.menuItems.push({ title: 'Documents', faIcon: '', url: '/documents/list' });
        this.menuItems.push({ title: 'Reports', faIcon: '', url: '/reports/list' });
        this.menuItems.push({ title: 'Notes', faIcon: '', url: '/notes/list' });
    }

<WrapLayout orientation="horizontal" itemWidth="120" class="menu">
        <StackLayout orientation="vertical" *ngFor="let item of menuItems" (tap)="selectMenuItem(item)">
            <Label class="fas" text="{{ item.faIcon }}"></Label>
            <Label class="fas" [text]="item.faIcon"></Label>
            <Label class="title" [text]="item.title"></Label>
        </StackLayout>
    </WrapLayout>

…然后它会正确显示。但是，如果我尝试使用text=“{item.faIcon}}”或[text]=“item.faIcon”，来呈现动态生成的图标，如下所示：

<Label class="fas" text="&#xf015;"></Label>

private buildMenuItems() {
        this.menuItems = [];
        this.menuItems.push({ title: 'Alerts', faIcon: '', url: '/alerts/list' });
        this.menuItems.push({ title: 'Properties', faIcon: '', url: '/properties/list' });
        this.menuItems.push({ title: 'Tenants', faIcon: '', url: '/tenants/list' });
        this.menuItems.push({ title: 'Accounting', faIcon: '', url: '/accounting/transactions/list' });
        this.menuItems.push({ title: 'Task Management', faIcon: '', url: '/todos/list' });
        this.menuItems.push({ title: 'Documents', faIcon: '', url: '/documents/list' });
        this.menuItems.push({ title: 'Reports', faIcon: '', url: '/reports/list' });
        this.menuItems.push({ title: 'Notes', faIcon: '', url: '/notes/list' });
    }

<WrapLayout orientation="horizontal" itemWidth="120" class="menu">
        <StackLayout orientation="vertical" *ngFor="let item of menuItems" (tap)="selectMenuItem(item)">
            <Label class="fas" text="{{ item.faIcon }}"></Label>
            <Label class="fas" [text]="item.faIcon"></Label>
            <Label class="title" [text]="item.title"></Label>
        </StackLayout>
    </WrapLayout>

private buildMenuItems（）{
this.menuItems=[]；
this.menuItems.push（{title:'Alerts'，faIcon:'；'，url:'/Alerts/list'}）；
this.menuItems.push（{title:'Properties'，faIcon:'；'，url:'/Properties/list'}）；
this.menuItems.push（{title:'Tenants'，faIcon:'；'，url:'/Tenants/list'}）；
this.menuItems.push（{title:'Accounting'，faIcon:'；'，url:'/Accounting/transactions/list'}）；
this.menuItems.push（{title:'taskmanagement'，faIcon:'；'，url:'/todos/list'}）；
this.menuItems.push（{title:'Documents'，faIcon:'；'，url:'/Documents/list'}）；
this.menuItems.push（{title:'Reports'，faIcon:'；'，url:'/Reports/list'}）；
this.menuItems.push（{title:'Notes'，faIcon:'；'，url:'/Notes/list'}）；
}

…然后将faIcon字符显示为文本，而不是实际图标。如何显示实际图标

---

答案是对组件中的字体图标进行编码。ts:

this.menuItems.push({ title: 'Alerts', faIcon: String.fromCharCode(parseInt('f0f3', 16)), url: '/alerts/list' });

---

您需要使用String.fromCharCode（）解码Unicode图标