Angular Таблица материалов, используйте директиву * ngIf; еще внутри стола - PullRequest
Новая
       82

Angular Таблица материалов, используйте директиву * ngIf; еще внутри стола

0 голосов
/ 27 мая 2020

Я работаю с материалом angular для отображения некоторых данных в моем компоненте. Я показываю таблицу с некоторой информацией. Но для отображения изображения я должен использовать директиву * ngIf, потому что некоторые элементы имеют изображение, а другой - нет.

Для элемента, у которого есть изображение (item.poster_path === true), отображение изображения: ... img src = "https://image.tmdb.org/t/p/w200/ {{element.poster_path}}" ...>

И для элемента, у которого нет изображения (item.poster_path === false) , я хочу отобразить это изображение: ... img src = "../../ assets / not_found.jpg" alt = "...">

Это шаблон моей страницы: 

<div class="mat-elevation-z8">
    <table mat-table [dataSource]="dataSource">
  
      <ng-container matColumnDef="poster">
        <th mat-header-cell *matHeaderCellDef> Poster</th>
        <td mat-cell *matCellDef="let element"> <img src="https://image.tmdb.org/t/p/w200/{{element.poster_path}}" alt="..."> </td>
      </ng-container>
  
      <ng-container matColumnDef="title">
        <th mat-header-cell *matHeaderCellDef> Title </th>
        <td mat-cell *matCellDef="let element"> {{element.title}} </td>
      </ng-container>
  
      <ng-container matColumnDef="date">
        <th mat-header-cell *matHeaderCellDef> Release date </th>
        <td mat-cell *matCellDef="let element"> {{element.release_date | date: 'dd MMMM, y'}} </td>
      </ng-container>

  
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
  
    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
  </div>

И это пример компонента, который я использую, который показывает директиву с отображаемым изображением: 

<div class="list" *ngIf="movie">
    <div class="list-img" *ngIf="movie.poster_path; else notFound">
        <img src="https://image.tmdb.org/t/p/w200/{{movie.poster_path}}" alt="...">

    </div>
    <ng-template #notFound>
        <div class="list-img">
            <img src="../../assets/not_found.jpg" alt="...">
        </div>

Если вы можете мне помочь, я буду очень рад!

Спасибо

...