Question

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

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

数据来自后端，因此Array的长度不断变化。我试图通过显示单个模块的'clauseObj'中的数据来列出一个列表，如果ClausType是sc，则应嵌套在parent子句的下面。

.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)
  }

}

我已经用数据创建了服务

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
  }

}

任何人都可以帮助我提出有关如何创建“材质嵌套树”的想法。我浏览了文档，这很令人困惑。

Answer 1

您可以使用flatMap

在ALLTESTComponent上更新您的getModules函数

getModules(){
    this.clauseArr =  this.service.getModules().flatMap(a=>a.clauseObj);
    console.log("Array", this.clauseArr)
  }

所以你明白了

[
   {"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"}]},
   {"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"}]}
]

Answer 2

您可以尝试使用lodash groupBy。（请参见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循环

2 个答案: