Использование углового массива 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

Привет, Правез я пробовал в своем местном.

И после некоторых изменений это работает.

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" из проекта.