在 Angular 2 中循环遍历数组

Question

组件：

export class PersonalRecordsComponent implements OnInit {
  currentUser = [];
  userRecords = [];
  movements = [
    "Back Squat",
    "Bench Press",
    "Clean",
    "Clean & Jerk",
    "Custom Movement",
    "Deadlift",
    "Front Squat",
    "Jerk",
    "Power Clean",
    "Power Snatch",
    "Push Press",
    "Snatch",
    "Strict Press"
  ];

  constructor(private afService: AF) {
    // Get current user details.
    afService.getCurrentUserInfo().then(currentUserDetails => {
      this.currentUser.push(currentUserDetails);
    }).then(() => {
      for(let movement of this.movements) {
        this.afService.getRecords(movement, this.currentUser[0].userID).subscribe((data) => {
          this.userRecords.push(data);
        });
      }
    }).then(()=>{
      console.log(this.userRecords)
    })
  }

HTML:

<ng-container *ngFor="let record of userRecords">
        <div class="list-athletes">
          <div class="list-athletes-details">
            <p>{{ record.movement }} - {{ record.weight }}</p>
          </div>
          <div class="list-athletes-actions">
            <div class="btn-group">
            </div>
          </div>
        </div>
      </ng-container>

上面的代码输出了13个<div>，这是正确的，但是由于*ngFor="let record of userRecords"，它们是空的。如果我改为在 *ngFor 循环中写入 *ngFor="let record of userRecords[0]"，它会输出正确的数据，但显然只针对第一个数组。

我的问题是：如何在不写 13 *ngFor 循环的情况下为 13 个数组中的每一个输出正确的数据，例如：

*ngFor="let record of userRecords[0]"
*ngFor="let record of userRecords[1]"
*ngFor="let record of userRecords[2]"

等等

这些数组中的每一个都可以包含多个对象。

[
  [
    {
      "comments": "Back squat comment alpha",
      "movement": "Back Squat",
      "userID": "wDHZv3OL55SIymHkhMUejNleNkx1",
      "weight": "365"
    },
    {
      "comments": "Back squat comment bravo",
      "movement": "Back Squat",
      "userID": "wDHZv3OL55SIymHkhMUejNleNkx1",
      "weight": "325"
    }
  ],
  [],
  [],
  [],
  [],
  [],
  [
    {
      "comments": "Front squat comment alpha",
      "movement": "Front Squat",
      "userID": "wDHZv3OL55SIymHkhMUejNleNkx1",
      "weight": "315"
    }
  ],
  [],
  [],
  [],
  [],
  [],
  []
]

Answer 1

您可以嵌套循环：

<div *ngFor="let record of userRecords">
    <div *ngFor="let item of record">...

Sample

Answer 2

作为一个想法，为什么不运行嵌入带有 *ngIf 的 *ngFor 循环以确保数组不为空？所以你 HTML 看起来像...

<ng-container *ngFor="let lift of userRecords">
  <div *ngIf="records(lift)">
    <div *ngFor="let record of lift">
    <div class="list-athletes">
      <div class="list-athletes-details">
        <p>{{ record.movement }} - {{ record.weight }}</p>
      </div>
      <div class="list-athletes-actions">
        <div class="btn-group"></div>
      </div>
    </div>
  </div>
  </div>
</ng-container>

然后您将向名为 records 的组件添加一个方法，它看起来像这样：

public records(lifts: any[]): boolean {
   return (lifts.length > 0) ? true : false;
}

这个函数只会检查是否有记录要显示。

Answer 3

你需要有两个 ngFor 因为记录也是一个数组，

<ng-container *ngFor="let record of userRecords">
    <div *ngFor="let reco of record">

还要确保在 app.module.ts

中导入了 CommonModule

在 Angular 2 中循环遍历数组

Looping through array in Angular 2

ngfor

angular