如何在离子中获取数组数组?

Question

如何在数组中获取对象的startTime和endTime？

<ion-col *ngFor="let col of timetable" >
<ion-row  *ngFor="let item in col">
{{item.StartTime}}-{{item.EndTime}}<br>{{item.SubjectName}}
</ion-row>
</ion-col> 

我想在 HTML 中为每个对象数组显示一列和不同行中的每个数据。我已经完成了 HTML 部分，但它没有向我显示数据，而且我也通过嵌套的 TypeScriptfor循环实现了这一点，然后它打印了不同的对象：

for (let temp of temptab) {
for (let tmp of temp) {
console.log(JSON.stringify(tmp));
}
}

输出：

{
"startTime" : 08:30:00,
"endTime" : 08:55:00,
"subjectName" : English
}

我的 JSON 数据 ：

{
"response": "OK",
"res": true,
"timetable": [
[
{
"startTime": "08:30:00",
"endTime": "08:55:00",
"subjectName": "English"
},
{
"startTime": "09:00:00",
"endTime": "09:55:00",
"subjectName": "English"
},
{
"startTime": "10:00:00",
"endTime": "10:55:00",
"subjectName": "Spanish/French"
},
{
"startTime": "11:00:00",
"endTime": "11:55:00",
"subjectName": "ICT"
},
{
"startTime": "12:00:00",
"endTime": "12:45:00",
"subjectName": "Lunch break"
}
]
]

Answer 1

代码中有一些错误，其中大部分是语法错误。

1 - 你的第二个*ngFor是错误的，它不是let item in col它必须是let item of col，否则它会抛出一个错误，说该属性不知道*ngForIn，因为它是一个*ngForOf。

2 - 属性名称错误，在您的 JSON 中，它们以小写字母 (startTime) 开头，在您的模板中，您以大写字母 ({{item.StartTime}}) 访问它们，因此无法访问，因为它不存在。

3 - 你的网格是错误的，row必须先出现，然后是col，所以它必须是：

<ion-row>
<ion-col></ion-col>
</ion-row>

此外，您还需要添加列属性，以便它可以具有所需的大小，请查看网格文档以了解如何执行此操作。

4 - 这不是错误，因为我看不到您的完整代码，所以我假设您已将 JSON 响应的timetable传递给单独的属性/变量。但如果没有，您必须更改您的第一个*ngFor以反映它，以便它可以像*ngFor="let col of myVariable.timetable".

希望这有帮助。