物料表单元格中的角度显示图像

时间:2019-02-09 20:53:19

标签: angular angular-material-table

我尝试在我的材料表的单元格中显示图像。因此,我在HTML文件中尝试了以下代码:

<ng-container matColumnDef="ImageUrl">
  <mat-header-cell *matHeaderCellDef> imageUrl </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.imageUrl}} </mat-cell>
  <img [src]="imageUrl" />
</ng-container>

不幸的是,我的桌子上什么也没有。

3 个答案:

答案 0 :(得分:2)

尝试一下:

Function

  

这是您推荐的Working Sample StackBlitz

答案 1 :(得分:0)

<ng-container matColumnDef="imageUrl">
  <th mat-header-cell *matHeaderCellDef> Image Url </th>
  <td mat-cell *matCellDef="let element"> <img src="{{element.imageUrl}}" /> </td>
</ng-container>

...也能用。干杯。

答案 2 :(得分:0)

实际上,您的代码只需进行一次更改即可。我想为那些想在他们的表格中使用 <mat-header-cell> <mat-cell> 而不是 <th><td> 的人分享答案。

<ng-container matColumnDef="ImageUrl">
  <mat-header-cell *matHeaderCellDef> imageUrl </mat-header-cell>
  <mat-cell *matCellDef="let element">
    <img [src]="element.imageUrl"/>
  </mat-cell>
</ng-container>

Working Sample