从 Ionic 中的 API 访问嵌套数组

Question

我目前正在制作一个应用程序，该应用程序旨在从 API 访问数据，以便在列表中显示信息。数据被构造为一个数组，其中每个条目也有自己的数组来显示条目，我目前试图弄清楚的是如何在列表中显示每个主要条目并访问辅助条目以修改点值使它们在一定的值范围内。

API 的界面如下所示

export interface RankingAPI {
    [x: string]: any;
    data: Data[];
}

export interface Data {
    points:   number;
    detail:   Detail[];
    userId:    number;
    firstName: string;
    lastName:  string;
    maxHr:     number;
}

export interface Detail {
    points:      number;
    workoutDate: Date;
}

主要的 Typescript 文件是什么样子的

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { RankingAPI } from "./rankingApi_interface";


@Component({
    selector: 'ranking',
    templateUrl: 'ranking.html'
})
export class RankList implements OnInit {
    public theTodo: RankingAPI;
    private _apiURL = '(api url being used)';
    constructor(
        private http: HttpClient
    ) {}
    ngOnInit(){
        this.http.get(this._apiURL).subscribe((data: RankingAPI) => {
            this.theTodo = data ;
            
            this.theTodo.data.forEach(item => {
                if (item.points == undefined) {
                    item.points = 0;
                }
            })
            
            console.log(this.theTodo.data);
        }) ;
    }
}

在 html 页面上显示条目也有问题，目前看起来像这样

<ion-header>
    <ion-navbar>
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
      <ion-title>Ranking List</ion-title>
    </ion-navbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <ion-item *ngFor="let item of data">
        {{item.userId}}
      </ion-item>
    </ion-list>
  </ion-content>

编辑：当该行更改为“let item of theTodo.data”时的样子

Console Screenshot

Screenshot of page

Answer 1

您将数据存储在 theTodo.data 中，因此在您的 .html 中使用 theTodo.data 直接插入数据，如下所示：

<ion-item *ngFor="let item of theTodo.data">
    {{item.userId}}
  </ion-item>