材料表单元格中的角度显示图像答案

【问题标题】：Angular show image in Material Table Cell材料表单元格中的角度显示图像
【发布时间】：2021-08-04 04:21:23
【问题描述】：

我尝试在 Material 表的单元格中显示图像。因此我在我的 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>

很遗憾，我的表格中没有任何内容。

【问题讨论】：

标签： angular angular-material-table

【解决方案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>

这里有一个Working Sample StackBlitz 供您参考。

【讨论】：

只需添加一个类或将此样式添加到img 标签选择器：img { width: 30px; height: 30px; } 我已经在示例 StackBlitz 中更新了相同的内容。请看一看。

【解决方案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>

...也可以。干杯。

【讨论】：

【解决方案3】：

实际上，您的代码只需进行一次更改即可工作。我想为那些想在他们的表格中使用<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

【讨论】：

非常敏感的回答