我正在尝试为我拥有的每个对象显示一个化身。 对象位于一个MongoDB数据库中,它也是一个一个显示的。 我遇到的问题是,如果我在显示对象的同时显示图像(假设我显示了3个对象),它会显示每个对象的所有3个化身,而不是每个对象的一个图像。 这是我的代码:
<ng-container *ngFor="let e of InstructorData">
<mat-card class="example-card" *ngIf="e.slope === 'Sinaia'">
<mat-card-header>
<div mat-card-avatar class="margin" *ngFor="let avatar of imagesData1">
<img class="example-header-image" mat-card-image [src]="avatar" >
</div>
<mat-card-title>{{e.name}} {{e.surname}}</mat-card-title>
<mat-card-subtitle>{{e.phoneNumber}}</mat-card-subtitle>
<mat-card-subtitle>{{e.email}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>{{e.description}}</p>
</mat-card-content>
</mat-card>
</ng-container>
imagesData1: any = [
"./assets/img/ski1.jpg",
"./assets/img/ski2.jpg",
"./assets/img/ski3.jpg"
];
您需要修改您的代码到下面,您不需要迭代所有的图像,只需根据父循环键获取图像,它将始终打印单个图像
<ng-container *ngFor="let e of InstructorData | key">
<mat-card class="example-card" *ngIf="e.slope === 'Sinaia'">
<mat-card-header>
<div mat-card-avatar class="margin">
<img class="example-header-image" mat-card-image [src]="imagesData1[key]" >
</div>
<mat-card-title>{{e.name}} {{e.surname}}</mat-card-title>
<mat-card-subtitle>{{e.phoneNumber}}</mat-card-subtitle>
<mat-card-subtitle>{{e.email}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>{{e.description}}</p>
</mat-card-content>
</mat-card>
</ng-container>