Question

我正在开发一个项目，我正在使用Angular 5.我是一个角色的新手，所以我在从json对象获取值时陷入困境。这是json的回复

[{"student_guid":"198","seconds":510,"session_count":0,"unit_1":{"0":0,"1":0,"2":0,"3":0,"4":0,"5":0,"6":0,"7":0}}]

我需要访问unit_1值。我正在使用表格显示此数据，因此我想迭代 td 。我使用* ngFor非常容易获得其他数据。请为我提供一个从 unit_1 键中提取数据的简单解决方案。如果我可以在html视图中管理所有这些而不是打字稿，那将是很棒的。

Answer 1

以下是我的问题的解决方案。

创建管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'valueArray',
})
export class ValueArrayPipe implements PipeTransform {

  transform(value: any, args: any[] = null): any {
        return Object.keys(value)//.map(key => value[key]);
  }
}

将其导入您的组件
按以下方式使用它从对象

<li *ngFor="let unit of student.unit_1 | valueArray">
{{student.unit_1[unit]}}</li>

如果需要，您也可以访问密钥，这是示例

<li *ngFor="let unit of student.unit_1 | valueArray">{{unit}}</li>

Answer 2

您正在尝试迭代一个对象，这就是为什么您不会使用标准的* ngFor来获取它。我刚发现帖子here，他们创建了一个使用* ngFor迭代对象的管道。

无论如何，我建议你重新检查你的数据结构，因为数组会更好地适应你，它将简化你的开发。查看more info on *ngFor

的文档

如何从json对象

2 个答案: