如何在ngFor列表中使用核心和自定义Angular材质图标的组合？

Question

说我有核心Angular Material icons的列表，像这样：

<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> 

如何在重复列表中使用两者的混合？

Answer 1

你需要某种标志来说明它是核心还是自定义。然后，您可以使用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>'