javascript - 如何在 Angular Ionic 的嵌套对象数组中显示数据？

Question

在我的 Ionic Angular 应用程序中，我试图显示下面的数组，其中包含几个锻炼练习。每个练习包括几组：

 exercises = [
    {
      name: 'Leg Extension Machine',
      sets: [
        { setNo: 1, reps: 8, weight: 40 },
        { setNo: 2, reps: 10, weight: 36 },
        { setNo: 3, reps: 15, weight: 33 },
      ],
    },
    {
      name: 'Leg Press Machine',
      sets: [
        { setNo: 1, reps: 8, weight: 80 },
        { setNo: 2, reps: 10, weight: 72 },
        { setNo: 3, reps: 15, weight: 65 },
      ],
    },
    {
      name: 'Rear Leg Elevated Split Squat (Bench)',
      sets: [
        { setNo: 1, reps: 8, weight: 8 },
        { setNo: 2, reps: 10, weight: 8 },
        { setNo: 3, reps: 15, weight: 8 },
      ],
    },
  ];

我可以用来ngFor显示练习名称，如下所示：

 <ion-card *ngFor="let exercise of exercises">
    <ion-card-header>
      <ion-card-title>
        {{exercise.name}}
      </ion-card-title>
    </ion-card-header>
  </ion-card>

它显示如下：

现在，我试图set在每个练习名称下显示每个。

我已经设法使用下面的嵌套循环将与每个集合相关的数据记录到控制台，但我不知道如何将这些数据获取到前端：

ngOnInit() {
    for (let i = 0; i < this.exercises.length; i++) {
      this.exercises[i].sets;
      console.log('---', this.exercises[i].name);
      for (let x = 0; x < this.exercises[i].sets.length; x++) {
        console.log('---', this.exercises[i].sets[x].weight);
      }
    }
  }

标签： javascriptarraysangulartypescriptionic-framework

Answer 1

这应该有效：

<ion-card *ngFor="let exercise of exercises">
    <ion-card-header>
        <ion-card-title>
            {{exercise.name}}
        </ion-card-title>
    </ion-card-header>
    <ion-card-content>
        <div *ngFor="let set of exercise.sets">
            <ul>
                <li><strong>Nr.</strong> {{set.setNo}}</li>
                <li><strong>Reps</strong> {{set.reps}}</li>
                <li><strong>Weight</strong> {{set.weight}}</li>
            </ul>
        </div>
    </ion-card-content>
</ion-card>

您已经分配了练习的当前对象，exercise因此您可以从该变量中检索集合并迭代这些集合。