Question

这是我的app.component.ts

@Component({
  selector: 'my-app',
  template: `<h1>{{title}}</h1>
  {{test | json}}

  <div ngFor='let test of tests' style='border: solid 1px'>
    <div>
      <P>
        writer: {{test.A.B.C.D.writerid}} <br>
        content:{{test}}<br>
        write_date:{{test}}</P>
    </div>
  </div>
  `,
})

public test: any[] = [
 {
   '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'
         }]
       }
     }]
   }
 }
];

test.A.B.C.D.writerid无效错误：无法读取属性＆＃39; B＆＃39;未定义的我不明白为什么错误不是A而是B 我如何访问D的内容或writedt或writerid

Answer 1

首先，我假设你的模板中有一些拼写错误（例如ngFor），并且该数组实际上被称为tests，但让我们忽略它。

我想你想迭代D的数组。 如果不对数据结构进行任何更改，您可以使用嵌套的*ngFor：s。

进行更改

首先，您的数组应该命名为tests，而不是test。如何访问最内部的数组，我们将首先迭代tests数组，然后迭代数组B，最后是最里面的数组D。所以你的模板看起来像这样：

  <div *ngFor="let test of tests">
    <div *ngFor="let x of test.A.B">
      <div *ngFor="let y of x.C.D; let i = index"> <h4>Content {{i+1}}</h4>
        {{y.content}}
        {{y.writedt | date}}
        {{y.writerid}}
      </div>
    </div>
  </div>

DEMO

Answer 2

您应该按如下方式访问它：

test[0].A.B[0].C.D[0].writerid

如何在angular2中访问嵌套的json数据

2 个答案:

DEMO