Question

我有一个json数组，我想在一个简单的列表中打印这些值。如何打印值？我必须遵循键值方法吗？我正在添加我的Json数组结构和我的示例代码。它向我展示了错误。

预期输出

*456
*123

or Arun :123 
test:456

错误：

“'对象''的''[object Object]'。NgFor仅支持绑定到诸如Arrays之类的Iterables。

错误：无法找到'object'类型的不同支持对象'[object Object]'。 NgFor仅支持绑定到诸如Arrays之类的Iterables。“

Json数组

   {
        "records": [{
            "arun": [1, 2, 3],
            "test": [4, 5, 6]
        }]
    }

**myTest.ts**

export class HomePageComponent extends AppComponent {

  public bundle:  any[];

   ngOnInit(){
     this.readArray();
   }

   readArray() {
    this.bundle =  {
        "records": [{
            "arun": [1, 2, 3],
            "test": [4, 5, 6]
        }]
    }
    console.log("array",this.bundle);
   }

testComponent.html

<ul *ngFor="let det of bundle;">
  <li>{{det.records}}</li>
</ul>

Answer 1

你需要在一个数组上使用ngFor，它应该是<div *ngFor="let record of bundle.records">，你也有一个嵌套数组，你可以使用 Object.keys ，如演示

@Component({
  selector: 'my-app',
  template: `
   <div *ngFor="let record of bundle.records">
      <ul *ngFor="let key of objectKeys(record)">
         <li>{{key}} :: {{record[key]}}</li>
      </ul>
   </div>
  `,
})

<强> DEMO

Answer 2

在模板中可以访问Object.keys并在* ngFor。

中使用它

  export class HomePageComponent extends AppComponent {
  objectKeys = Object.keys;

然后在你的模板中

 <ul *ngFor="let key of objectKeys(bundle.records[0]);">
    <li>{{key + ' : ' + bundle.records[0][key]}}</li>
  </ul>

如何在Angular 2中使用* ngFor在列表中打印json数组值？

2 个答案: