TypeScript for 嵌套数组中的循环 [英] TypeScript for loop in a nested Array

问题描述

我正在学习 Angular 并遇到了这个问题，我希望这个社区能帮助我...我是第一次发帖.所以，我有一个看起来像这样的数组:

I am learning Angular and ran into this problem which I hope this community would help me with...I am posting for the first time. So, I have an array that looks something like :

{moduleId : 1,moduleName: "module1",clauseObj: [{clauseId : 1, moduleId:1, clauseName : "clause1", clauseType : "sc",parentclause : 2 textArray : [{text : "text 1 clause"}]
}, {clauseId : 2 , moduleId : 1, clauseName : "clause2",clauseType : "C",textArray:[{
  text : "text 2clause"
}]}]}

数据来自后端，因此数组的长度不断变化.我试图通过显示来自各个模块的clauseObj"的数据来制作一个列表，如果子句类型是 sc，它应该嵌套在父子句下面.

The data is coming from the backend so the length of the Array keeps on changing. I am trying to make a list by displaying the data from the 'clauseObj'of individual Modules and if the clauseType is sc, it should be nested below the parent clause.

.ts 文件是

import { Component, OnInit } from '@angular/core';
import { AltserService } from './altser.service';

@Component({
  selector: 'app-alltest',
  templateUrl: './alltest.component.html',
  styleUrls: ['./alltest.component.css']
})
export class ALLTESTComponent implements OnInit {
  clauseArr = []

  testArray = [ ]
  constructor(private service : AltserService) { }

  ngOnInit() {
    this.getModules() 
  }

  getModules(){
    this.clauseArr =  this.service.getModules()
    console.log("Array", this.clauseArr)
  }

}

并且我创建了一个带有数据的服务

and I have created a service with data

import { Injectable } from '@angular/core';
import { ModObj } from './altse-clasr';

@Injectable({
  providedIn: 'root'
})
export class AltserService {

  arrayM : ModObj[] = [
    {moduleId : 1,moduleName: "module1",clauseObj: [{
      clauseId : 1, moduleId:1, clauseName : "clause1", clauseType : "sc", textArray : 
      [{text : "text 1 clause"}]}, 

      {clauseId : 2 , moduleId : 1, clauseName : "clause2",clauseType : "C",textArray:[{
      text : "text 2clause"
    }]}]}, 


    {moduleId : 2,moduleName: "module1",clauseObj: [{
      clauseId : 1, moduleId:2, clauseName : "clause1M2", clauseType : "sc", textArray : 
      [{text : "text mod 2 1 clause"}]}, 
      {clauseId : 2 , moduleId : 2, clauseName : "clause2M2",clauseType : "C",textArray:[{
      text : "text mod2 2clause"
  }]}]}
  ]


  constructor() { }



  getModules(){
    return this.arrayM
  }

}

任何人都可以帮助我了解如何创建材质嵌套树.我已经阅读了文档，这很令人困惑.

Can anyone help me with an idea on how to create Material Nested Tree. I have gone through the docs and It is confusing.

推荐答案

你可以试试 lodash groupBy.(参见 stackblitz https://stackblitz.com/edit/angular-d2tuwd)

You can try with lodash groupBy. (see stackblitz https://stackblitz.com/edit/angular-d2tuwd)

组件:

data = {
    moduleId : 1,
    moduleName: "module1",
    clauseObj: [
      {
        clauseId : 1,
        moduleId:1,
        clauseName : "clause1",
        clauseType : "sc",
        parentclause : 2,
        textArray : [
          { text : "text 1 clause" }
        ]
      },
      {
        clauseId : 2,
        moduleId : 1,
        clauseName : "clause2",
        clauseType : "C",
        textArray: [
          { text : "text 2clause" }
        ]
      }
    ]
  };

  groupedData = _groupBy(this.data.clauseObj, 'parentclause');

HTML:

<ul>
  <li *ngFor="let parent of groupedData[undefined]">
    {{ parent.clauseName }}
    <ul *ngIf="groupedData[parent.clauseId]">
      <li *ngFor="let child of groupedData[parent.clauseId]">
        {{ child.clauseName }}
      </li>
    </ul>
  </li>
</ul>

这篇关于TypeScript for 嵌套数组中的循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！