Question

我有一个对象值数组。我正在使用group by方法根据type.it给出一个数组值的对象。我很难在角度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/检查），当你用[]替换第一个{}时，（并添加comas，ofcourse！）一切都会正常工作，这里是有效的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"
    }
  ]

然后在角度视图中：

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

Answer 3

感谢大家的回复。我得到了一个问题的解决方案。

    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以角度2表示数组值的显示对象

3 个答案: