我有一个包含数组的对象-该数组可以包含一个或多个与父对象相同类型的对象。可能的级别数量没有界限。要显示当前数据集中的所有数据,我需要以下代码:
<div *ngIf="selectedUserMappings">
<ul *ngFor="let group of selectedUserMappings.childGroups">
<li style="font-weight:600;">{{group.name}}</li>
<div *ngFor="let child of group.childGroups">
<li *ngIf="child.active">{{child.name}}</li>
<div *ngFor="let n2child of child.childGroups">
<li *ngIf="n2child.active">{{n2child.name}}</li>
<div *ngFor="let n3child of n2child.childGroups">
<li *ngIf="n3child.active">{{n3child.name}}</li>
</div>
</div>
</div>
</ul>
</div>
这不是达到所需结果的很好方法。有更好的方法吗?
编辑:从到目前为止的建议来看,我认为要走的路将是虚拟组件。我需要在列表中显示具有不同样式的外部父母,现在我可以。但是,我还需要隐藏没有孩子活动(所有对象都具有活动布尔值)以及不活动的孩子的顶级父母。但是,不活跃的孩子的孩子仍然应该可见。有任何想法吗?这是到目前为止我得到的:
import { Component, OnInit, Input } from '@angular/core';
import { UserGroupMapping } from 'src/app/models/models';
@Component({
selector: 'list-item',
templateUrl: './list-item.component.html',
styleUrls: ['./list-item.component.scss']
})
export class ListItemComponent implements OnInit {
@Input() data;
list: Array<any> = [];
constructor() { }
ngOnInit() {
this.data.forEach(item => {
this.createList(item, true);
});
}
createList(data, parent?) {
if (parent) {
this.list.push({'name': data.name, 'class': 'parent'});
if (data.childGroups && data.childGroups.length > 0) {
this.createList(data, false);
}
} else {
data.childGroups.forEach(i => {
this.list.push({'name': i.name, 'class': 'child'});
if (i.childGroups && i.childGroups.length > 0) {
this.createList(i, false);
}
});
}
console.log(this.list);
}
}
从父组件这样调用:
<div *ngIf="mappings">
<list-item [data]="mappings.childGroups"></list-item>
</div>
答案 0 :(得分:1)
您描述了一棵树。尝试使用某种树组件。例如prime ng具有树组件。
答案 1 :(得分:0)
我最终废弃了虚拟组件,在显示它之前直接在我的组件中建立了列表-这样可以更容易地立即显示更改。
createSummary() {
this.listFinished = false;
this.mappings.childGroups.forEach(item => {
this.list = [];
this.createList(item, true);
this.list.forEach(i => {
if (i.active) {
this.list[0].active = true;
}
});
this.lists.push(this.list);
});
this.listFinished = true;
}
createList(data, parent?) {
if (parent) {
this.list.push({'name': data.name, 'class': 'parent', 'active': false});
if (data.childGroups && data.childGroups.length > 0) {
this.createList(data, false);
}
} else {
data.childGroups.forEach(i => {
this.list.push({'name': i.name, 'class': 'child', 'active': i.active});
if (i.childGroups && i.childGroups.length > 0) {
this.createList(i, false);
}
});
}
}
然后我将其显示如下:
<div *ngIf="listFinished">
<ul *ngFor="let list of lists">
<div *ngFor="let item of list">
<li [class]="item.class" *ngIf="item.active">
{{item.name}}
</li>
</div>
</ul>
</div>