angular - 错误类型错误：iconName.split 不是函数

Question

无法显示 svgIcon。我将 iconName 作为 svgIcon 中的输入。

名称，价格是显示如果删除正常工作<mat-icon>。

显示如下错误：

TypeError：iconName.split 不是 MatIcon.push../node_modules/@angular/material/esm5/icon.es5.js.MatIcon._splitIconName 的函数

app.component.ts

 getList(): ItemModel[] {

    const dataList: ItemModel[] = [];

    // let dataKey: string[] = [];

    const tempSanitizer = this.sanitizer;

    const tempService = this.service;

    Object.keys(this.service.dataSource).forEach( (key: string) => {

      dataList.push(this.service.dataSource[key]);

      // if (!tempService.dataSource.hasOwnProperty(key)) {
      //   console.log(key);
      // }
      // console.log(tempService.dataSource[key].icon);
      this.iconRegistery.addSvgIcon(

        key,

        tempSanitizer.bypassSecurityTrustResourceUrl(tempService.dataSource[key].icon)

      );

      }
    );

  return dataList;

}

app.component.html

<app-grid-beer [title]="'Top Weekly'" [itemList]="getList()"></app-grid-beer>
<!-- [dataSource]="" -->
    <app-grid-beer [title]="'Ever Green'" [itemList]="getList()"></app-grid-beer>

网格啤酒.component.html

 <mat-grid-tile *ngFor="let item of itemList">

      <div fxLayout="column" fxLayoutGap="5px" fxLayoutAlign="center center">

        <mat-icon [svgIcon]="item.id" class="section-icon-height"></mat-icon>

        <span>{{item.id}}</span>

        <mat-label class="subtitle-1">{{item ? item.name : ''}}</mat-label>

        <label class="h6-header"><mat-icon svgIcon="rupee" class="rupee-icon"></mat-icon>{{item ? item.price : '' }}</label>

      </div>

    </mat-grid-tile>

标签： angularangular-materialmaterial-designangular7