以 ngfor 为单位的图像绑定，用于角度材质

Question

问题是：我正在构建一个仪表板，其中包含我在垫子网格列表中的 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>

TS：

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>

Answer 2

您可以尝试使用角度插值来在视图中显示图像：

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