Изображение углового показа в ячейке таблицы материалов

Question

Я пытаюсь показать изображение в ячейке моей таблицы материалов. Поэтому я попробовал этот код в моем файле 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>

К сожалению, в моей таблице ничего не появляется.

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>

---

Вот рабочий образец StackBlitz для вашей ссылки.

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

На самом деле ваш код будет работать с одним изменением. Хочу поделиться ответом для тех, кто хотел бы использовать <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>

Рабочий образец