数组 – 嵌套* ngFors – 更好的选择？ (角7)

2023年10月28日 228次阅读

我有一个包含数组的对象 – 这个数组可以包含一个或多个与父数组相同类型的对象.可能的水平数量没有边界.要显示当前数据集中的所有数据,我有以下代码：

<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>

这不是一个很好的方法来实现想要的结果.有关更好方法的指示吗？

编辑：从目前为止的建议,我认为要走的路将是一个虚拟组件.我需要在列表中显示具有不同样式的外部父母,我现在可以这样做.但是,我还需要隐藏没有子项处于活动状态的顶层父项(所有对象都有一个active-boolean),以及不活动的子项.尽管如此,仍然应该看到非活跃孩子的孩子.有任何想法吗？这是我到目前为止所得到的：

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>

最佳答案 你描述了一棵树.尝试使用某种树组件.例如,
prime ng具有树组件.

点赞