如何在ngFor列表中使用核心和自定義Angular材質圖標的組合？

說我有核心Angular Material icons的列表，像這樣：如何在ngFor列表中使用核心和自定義Angular材質圖標的組合？

<md-nav-list> 
    <a md-list-item *ngFor="let item of items"> 
     <md-icon>{{item.icon}}</md-icon> 
    </a> 
</md-nav-list>

不過，我已經定義了一些自定義的，像這樣：

iconRegistry 
    .addSvgIcon('blah_icon', sanitizer.bypassSecurityTrustResourceUrl('images/blah.svg'))

和自定義圖標需要不同的標記結構，就像這樣：

<md-icon svgIcon="{{item.icon}}"></md-icon>

如何在重複列表中使用兩者的混合？

來源

2017-08-02 isherwood

你需要某種標誌來說明它是核心還是自定義。然後，您可以使用ngIf呈現DOM

<md-nav-list> 
    <a md-list-item *ngFor="let item of items"> 
     <md-icon *ngIf="item.flag">{{item.icon}}</md-icon> 
     <md-icon *ngIf="!item.flag" svgIcon="{{item.icon}}"></md-icon> 
    </a> 
</md-nav-list>

另一種選擇是使用在模板[innerHTML]和更改圖標字符串包括DOM：

<md-nav-list> 
    <a md-list-item *ngFor="let item of items" [innerHtml]="item.icon"></a> 
</md-nav-list>

隨着新item.icon是.. 。

'<md-icon>home</md-icon>'

或

'<md-icon svgIcon="blah_icon"></md-icon>'

來源

2017-08-02 22:00:45

這基本上是我最終做的，雖然我正在檢查自定義圖標的名稱。然而，我認爲這是一個臨時解決方案。重複的標記是醜陋的。 – isherwood

其他選項：在您的中使用[innerHTML]，並將兩個不同的DOM項目作爲字符串或將所有材質圖標添加爲自定義字體，並使用svgIcon輸入將其全部渲染。 –

我明白了。整個innerHTML字符串會被存儲在數據庫中嗎？ – isherwood

如何在ngFor列表中使用核心和自定義Angular材質圖標的組合？

回答

相關問題