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'
         }]
       }
     }]
   }
 }

我得到的错误是：

找不到不同的支持对象＆＃39; [object Object]＆＃39;类型＆＃39;对象＆＃39;。 NgFor仅支持绑定到Iterables，例如Arrays。

我该如何解决？

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>

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

<强>误

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

LIVE DEMO

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

1 个答案: