ngfor

Question

我下面有嵌套数组

我在这张照片中包含键和数据数组

第二张图片显示了数据的结构

我正在尝试使用ngfor nested绑定

*ngFor="let item of groupByOrgData"
*ngFor="let cof of item.data
 {{cof.element.checklistAssociatedTo}}

下面是我用来生成数组的代码

 this.groupByOwn = [];
      res.forEach(item => {
        this.groupByOwn.push({ id: item.id, element: item, groupBy: item.orgId + '_' + item.orgName });

      });
      this.groupByOrg = _.groupBy(this.groupByOwn, function (n) {
        return n.groupBy
      });
      let props = Object.keys(this.groupByOrg);
      this.groupByOrgData = [];
      for (var prop of props) {
        this.groupByOrgData.push({ key: prop, data: this.groupByOrg[prop] });
      }

但是它不起作用

请帮助

Answer 1

嘿Pravez我在本地尝试过。

经过一些更改后，它就可以工作了。

  

hello-world.component.html

<ul>
  <li *ngFor="let item of org">
    <p>{{item.key}}</p>

    <ol>
      <li *ngFor="let it of item.data">{{it.element.ca }}</li>
    </ol>
  </li>
</ul>

  

hello-world.component.ts

import { Component} from '@angular/core';

@Component({
  selector: 'app-hello-world',
  templateUrl: './hello-world.component.html',
  styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent {
  org: any  = [
    {
       "key":"Human Resources_Human Resources",
       "data":[
          {
             "id":"1HwahYXr5hs3IDTn7RtC",
             "element":{
                "id":"1HwahYXr5hs3IDTn7RtC",
                "ca":"1x"

             },
             "groupBy":"Human Resources_Human Resources"
          },
          {
             "id":"I7kCoWl7JLCWvgSdZm6p",
             "element":{
                "id":"I7kCoWl7JLCWvgSdZm6p",
                "ca":"2x"

             },
             "groupBy":"Human Resources_Human Resources"
          },
          {
             "id":"TkXA0CyTlfDbTsirg45p",
             "element":{
                "id":"TkXA0CyTlfDbTsirg45p",
                "checklistAscasociatedTo":"3x"
             },
             "groupBy":"Human Resources_Human Resources"
          },
          {
             "id":"hW0DYe2zOBO6AzP3MxbC",
             "element":{
                "id":"hW0DYe2zOBO6AzP3MxbC",
                "ca":"4x"
             },
             "groupBy":"Human Resources_Human Resources"
          }
       ]
    },
    {
       "key":"Marketing_Marketing",
       "data":[
          {
             "id":"Ltgk4vvKNILwYry1thXL",
             "element":{
                "id":"Ltgk4vvKNILwYry1thXL",
                "ca":"5x"
             },
             "groupBy":"Marketing_Marketing"
          },
          {
             "id":"aA43supw5IYmVLkniC8c",
             "element":{
                "id":"aA43supw5IYmVLkniC8c",
                "ca":"6x"
             },
             "groupBy":"Marketing_Marketing"
          },
          {
             "id":"jIIbXuaaQP4aRKK2c6GD",
             "element":{
                "id":"jIIbXuaaQP4aRKK2c6GD",
                "ca":"7x"
             },
             "groupBy":"Marketing_Marketing"
          }
       ]
    },
    {
       "key":"Sales_Sales",
       "data":[
          {
             "id":"WwYl7FelUSVo8i5eMYMk",
             "element":{
                "id":"WwYl7FelUSVo8i5eMYMk",
                "ca":"8x"
             },
             "groupBy":"Sales_Sales"
          }
       ]
    }
 ];
}

您还可以从此处下载完整的角度项目。

http://calm-haircut.surge.sh/SO_52436935.zip

Plz运行npm install是因为我从项目中删除了“ node_modules”。