从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>

编辑：这是当这行被改为"；让"Too.data"的项目；

控制台屏幕截图

页面屏幕截图

Answer 1

您将数据存储在Too.data中，因此在.html中使用Too.data而不是直接使用数据，如：

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