html - ngfor 中用于 Angular Material 的图像绑定(bind)

Question

问题是:我正在用 mat 网格列表中的 4 张卡片构建一个仪表板。我可以在 ngfor 中给它们命名，但我需要在所有 4 张卡片中放置不同的图像，但我做不到。请帮忙!

html:

<div class="grid-container">
  <h1 class="mat-h1">Execute Process</h1>
  <mat-grid-list cols="2" rowHeight="250px" rowWidth= "250px">
    <mat-grid-tile *ngFor="let card of cards | async" [colspan]="card.cols" [rowspan]="card.rows" [style.border]="card.border" >

      <mat-card class="dashboard-card">
        <mat-card-header>
          <mat-card-title>
            {{card.title}}
            {{card.imgUrl}}
          </mat-card-title>
        </mat-card-header>

      </mat-card>
    </mat-grid-tile>
  </mat-grid-list>
</div>

:

export class DashComponent {
  /** Based on the screen size, switch from standard to one column per row */


  cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
    map(({ matches }) => {
      if (matches) {
        return [
          { title: 'Data Monitoring', imgUrl: './assets/data.png',  cols: 1, rows: 1, border: '1px double purple' },
          { title: 'New Customer Onboarding', imgUrl: 'assets/customer.png' ,cols: 1, rows: 1, border: '1px double yellow' },
          { title: 'Process PO', imgUrl: 'assets/process.png' ,cols: 1, rows: 1,border: '1px double skyblue'  },
          { title: 'Portal Scrapping',imgUrl: 'assets/portal.png' , cols: 1, rows: 1, border: '1px double red' }
        ];
      }

      return [
        { title: 'Data Monitoring', img: 'assets/data.png',  cols: 1, rows: 1, border: '3px double purple' },
          { title: 'New Customer Onboarding', img: 'assets/customer.png' ,cols: 1, rows: 1, border: '3px double yellow' },
          { title: 'Process PO', img: 'assets/process.png' ,cols: 1, rows: 1,border: '3px double skyblue'  },
          { title: 'Portal Scrapping',img: 'assets/portal.png' , cols: 1, rows: 1,border: '3px double red' }
      ];
    })
  );

  constructor(private breakpointObserver: BreakpointObserver) {}
}

Answer 1

要显示图片，您需要使用 img 标签并将图片路径传递给其 src，如下所示:

<mat-card-title>
            {{card.title}}
            <img [src]="card.imgUrl"/>
</mat-card-title>