使用 Ngfor 在 angular 2 中显示数组值的对象

Question

我有一个对象数组 values.i 我正在使用分组方法对基于 type.it 的值进行分组 type.it 给出了一个数组对象 values.i 很难显示这些值在 angular 2.

中使用 Ngfor

我有以下结构值。

    {
      [
        {
          id:1
          body:"value1"
          type:"name"
        },
        {
          id:2
          body:"value1"
          type:"id"
        }
      ],
      [
        {
          id:3
          body:"value1"
          type:"name"
        },
        {
          id:4
          body:"value1"
          type:"id"
        },
        {
          id:5
          body:"value1"
          type:"name"
        }
      ],
      [
        {
          id:6
          body:"value1"
          type:"id"
        },
        {
          id:7
          body:"value1"
          type:"fname"
        },
        {
          id:8
          body:"value1"
          type:"fname"
        }
      ]
   }

我的 html 代码是。

<div *ngFor="let value of result">
{{value.body}}
</div>

Answer 1

ngFor 仅适用于 Array 元素。此外，您当前的 JSON 似乎无效。虽然您可以轻松地将数组展平为单个数组并使用 ngFor 在 DOM

上呈现它

<div *ngFor="let value of flattenArray">
  {{value.body}}
</div>

组件

flattenArray = [];
//after retrieving result, create flatten array.
for(let value of result){
   this.flattenArray.conact(value);
}

Answer 2

你拥有的不是对象数组，它甚至不是 JSON（用 https://jsonlint.com/ 检查），当您将第一个 {} 替换为 [] 时（当然还要添加逗号！）一切正常，这里有效 json:

[
  [
    {
      id:1,
      body:"value1",
      type:"name"
    },
    {
      id:2,
      body:"value1",
      type:"id"
    }
  ],
  [
    {
      id:3,
      body:"value1",
      type:"name"
    },
    {
      id:4,
      body:"value1",
      type:"id"
    },
    {
      id:5,
      body:"value1",
      type:"name"
    }
  ]

]

然后在 angular 视图中：

<div *ngFor="let items of result">
     <div *ngFor="let value of items">
        {{value.body}}
      </div>
</div>

Answer 3

感谢大家 response.i 找到了问题的解决方案。

    let value = _.groupBy(data, "type");
    for (let key in value) {
      content.push({ key: key, value: value[key] });
    }

我的html是

 <div *ngFor="let keys of content">
   <div *ngFor="let value of keys.value">
      {{value.body}}
   </div>
 </div>

使用 Ngfor 在 angular 2 中显示数组值的对象

Dispaly object of array values in angular 2 using Ngfor

arrays

angularjs

angular2-template