Angular 8 一次显示一张图片

Question

我正在尝试为我拥有的每个对象显示一个头像。该对象位于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"
  ];

Answer 1

您需要将您的代码修改为以下您不需要遍历所有图像只需根据父循环键获取图像它将始终打印单个图像

<ng-container *ngFor="let e of InstructorData; let key = index">
        <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>

Angular 8 一次显示一张图片

Angular 8 display one image at a time

html

typescript

angular-material

angular

mat-card