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

如何在ngFor列表中混合使用核心和自定义Angular Material图标？

1 个答案: