0

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

1 回答 1

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>
于 2020-06-26T15:11:00.997 回答