在 Angular 中访问 HTTP 嵌套的 JSON 数据

Question

这是有问题的组件：

@Component({
  selector: 'my-app',
  template: `
  {{tests | json}}

    <div *ngFor='let test of tests'>
        <div *ngFor='let x of test.A.B'>
          <div *ngFor='let y of x.C.D'>
            writerid:{{y.writerid}} <br>
            content:{{y.content}} <br>
            writedt:{{y.writedt }} <br>
          </div>
       </div>
    </div>
  `,
})

public tests: any[];

构造函数在这里从 API 获取 JSON 数据：

constructor(private _http: Http) {
    _http.get(this.API_URI).subscribe(result => {
      this.tests = result.json();
    });
  }

这是我来自http(API_URI) 的 JSON 数据，由{{tests | json}} 打印（在@component，模板中）：

 {
   'A': {
     'B': [{
       'C': {
         'D': [{
           'content': 'content_test1',
           'writedt': '2017-02-08 00:00:00',
           'writerid': 'writerid_test1'
          }, {
           'content': 'content_test2',
           'writedt': '2017-02-08 00:00:00',
           'writerid': 'writerid_test1'
          }, {
            'content': 'content_test3',
            'writedt': '2017-02-08 00:00:00',
            'writerid': 'writerid_test2'
          },  {
           'content': 'content_test4',
           'writedt': '2017-02-08 00:00:00',
           'writerid': 'writerid_test2'
         }]
       }
     }]
   }
 }

我得到的错误是这样的：

找不到“object”类型的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

我该如何解决？

Answer 1

查看您的 json，它有对象，但 ngFor 适用于数组类型

<div *ngFor='let x of tests.A.B'>
          <div *ngFor='let y of x.C.D'>
            writerid:{{y.writerid}} <br>
            content:{{y.content}} <br>
            writedt:{{y.writedt }} <br>
          </div>
       </div>
    </div>

这就是您收到此错误的原因。

错误

1. <div *ngFor='let test of tests'> - 测试是对象类型，而不是对象或数组的集合。

LIVE DEMO