嵌套数组中的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"
}]}]}
数据来自后端,因此Array的长度不断变化.我正在尝试通过显示单个模块的'clauseObj'中的数据来列出列表,如果ClausType是sc,则应嵌套在parent子句下面.
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屋!