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

2020年12月2日 53点热度 0条评论 来源: Deepak Vijay

我有一个json数组,我想打印一个简单的列表中的值。如何打印值?我必须遵循关键值方法吗?我添加了我的Json数组结构和示例代码。它向我展示了错误。如何在Angular 2中使用* ngFor在列表中打印json数组值?

预期输出

*456 
*123 

or Arun :123 
test:456 

错误:

"'[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays."

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> 

===========解决方案如下:

您需要使用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

    原文作者:Deepak Vijay
    原文地址: https://stackoverflow.com/q/46578427
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。