Angular 在 Material Table 单元格中显示图像

Question

我尝试在 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>

不幸的是，我的 Table.

中没有任何内容

Answer 1

试一试：

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

Here's a Working Sample StackBlitz for your ref.

Answer 2

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

...也可以。干杯。

Answer 3

实际上，您的代码只需稍作更改即可工作。我想与那些想在 table.

中使用 <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

Angular 在 Material Table 单元格中显示图像

Angular show image in Material Table Cell

angular

angular-material-table