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

Question

我有一个 json 数组，我想打印一个简单列表中的值。如何打印数值？我必须遵循键值方法吗？我正在添加 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>

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