如何通过与材质表一起使用创建列来添加HTML代码

时间:2018-12-12 07:30:31

标签: angular angular-material

我通过创建列有问题,也许您有解决方案。我将显示如下代码:

columns = [{ columnDef: 'position', header: 'No.',    cell: (element: any) => `${element.position}` },
{ columnDef: 'name',     header: 'Name',   cell: (element: any) => `${element.name}`     },
{ columnDef: 'weight',   header: 'Weight', cell: (element: any) => `${element.weight}`   },
{ columnDef: 'symbol',   header: 'Symbol', cell: (element: any) => `${element.symbol}`   },
{ columnDef: 'symbols',   header: 'Symbols', cell: (element: any) => '${<mat-icon matTooltip="">more_horiz</mat-icon>}'   },];

在最后一行,我只想为动态创建的每一列插入“材质图标”。我已经尝试了很多次,但是不幸的是我的尝试没有成功。

也许您可以给我一些建议。

1 个答案:

答案 0 :(得分:0)

在这种情况下,为什么不使用超棒的字体而不是垫子组件。

let desiredOutput = [
  {
    name: "BarBar",
    values: [m, n]
  },
  {
    name: "Bar",
    values: [x, y]
  },
  {
    name: "Foo",
    values: [a, b, c, d]
  },
  {
    name: "FooBar",
    values: [k, l, m]
  }
]

或者如果图标不是动态图标,则只需使用:

{ columnDef: 'symbols',   header: 'Symbols', cell: (element: any) => '<i class="fa fa-'${element.icon}'"></i>}'   }