Angular 6 嵌套数组在ngfor中的使用

Question

我有下面的嵌套数组

这张图片我有键和数据数组

现在第二张图展示了数据的结构

我正在尝试使用嵌套的 ngfor 绑定它

*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

我在本地试过了。

经过一些更改后它正在运行。

你好-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>

你好-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"
          }
       ]
    }
 ];
}

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

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

您将需要运行 npm install 因为我从项目中删除了 "node_modules"。

Angular 6 嵌套数组在ngfor中的使用

Angular 6 nested array use in ngfor

javascript

arrays

ngfor

angular6