如何在 Angular Ionic 的嵌套对象数组中显示数据？ [复制]答案

【问题标题】：How to display data within nested object array in Angular Ionic? [duplicate]如何在 Angular Ionic 的嵌套对象数组中显示数据？ [复制]
【发布时间】：2021-08-25 19:19:57
【问题描述】：

在我的 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);
      }
    }
  }

【问题讨论】：

标签： javascript arrays angular typescript ionic-framework

【解决方案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，因此您可以从该变量中检索集合并迭代这些集合。

【讨论】：

【解决方案2】：

在模板中，您需要使用 3 个循环，并通过键和值显示您需要利用 keyvalue 管道的单个集合。

<div *ngFor="let exercise of exercises">
  <h2>{{ exercise.name }}</h2>

  <div *ngFor="let set of exercise.sets">
    <span *ngFor="let prop of set | keyvalue">
      {{ prop.key }}: {{ prop.value }}
    </span>
  </div>
</div>

这是stackblitz

【讨论】：