Блог

не удается отобразить svgIcon. я ввожу iconName в качестве входных данных в svgIcon.

Имя, цена отображаются корректно, если удалить <mat-icon> .

с ошибкой show me, как показано ниже:

Ошибка типа: 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>
  

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>