ngfor中的Angular 6嵌套數組使用

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

我在本地嘗試過。

經過一些更改后，它就可以工作了。

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

您也可以從此處下載完整的Angular項目。

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

您將需要運行npm install因為我從項目中刪除了“ node_modules”。