如何遍历包含 angular 中同类数组的数组

Question

我有 angular 应用程序，其中包含 Employ 模型 class 如下：

export interface Employee {
name: string;
type: string;
subordinates: Employee[];
}
export declare class EmployeeEntity implements Employee {
name: string;
type: string;
subordinates: EmployeeEntity[];
supervisor?: EmployeeEntity;
constructor(orgStructure: string[], supervisor?: EmployeeEntity);
}

员工将属性"subordinates"作为相同数据类型的数组

在 participant.component.ts 文件中，它给出的值为：

export class ParticipantComponent implements OnInit {

  constructor() { }


  empData: Employee= {
name: "Iron Man",
type: 'CEO',
subordinates: [
    {
        name: "Captain America",
        type: 'VP',
        subordinates: [
            {
                name: "Hawkeye",
                type: 'manager',
                subordinates: []
            },
            {
                name: "Antman",
                type: 'Manager',
                subordinates: []
            }
        ]
    },
    {
        name: "Black Widow",
        type: 'VP',
        subordinates: [
            {
                name: "Hulk",
                type: 'manager',
                subordinates: [
                    {
                        name: "Spiderman",
                        type: 'Intern',
                        subordinates: []
                    }
                ]
            },
            {
                name: "Thor",
                type: 'Manager',
                subordinates: [
                    {
                        name: "Loki",
                        type: 'Team Lead',
                        subordinates: []
                    }
                ]
            }
        ]
    }
]


 };

  ngOnInit(): void {
  }

}

在 participant.component.html 文件中，我打算将模型 class 中的值打印到组织结构图中。

<div class = "container">
            <div class="tree"  *ngIf="empData"> 
                    <ul>
                        <li>
                            <a href="#"> {{empData.name}}   <br/>
                                {{empData.type}}
                            </a>

                            <ul>
                                <li *ngFor="let item of empData.subordinates">
                                    <a href="#"> {{item.name}}   <br/>
                                        {{item.type}}
                                    </a>
                                    <ul>
                                        <li *ngFor="let subitem of item.subordinates">
                                                <a href="#"> {{subitem.name}}   <br/>
                                                    {{subitem.type}}
                                                </a>
                                        </li>
                                    </ul>
                                </li>

                            </ul> 
                        </li>
                    </ul>
            </div>
    </div>

现在的问题是，我需要持续执行 *ngFor 多长时间才能查找值。反正有没有寻找数组长度或其他一些逻辑，因为可能有无限数量的值？请帮帮我

这是样式文件 incase。

 * {margin: 0; padding: 0;}

    .tree ul {
        padding-top: 20px; position: relative;

        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
    }

    .tree li {
        float: left; text-align: center;
        list-style-type: none;
        position: relative;
        padding: 20px 5px 0 5px;

        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
    }

    /*We will use ::before and ::after to draw the connectors*/

    .tree li::before, .tree li::after{
        content: '';
        position: absolute; top: 0; right: 50%;
        border-top: 1px solid #ccc;
        width: 50%; height: 20px;
    }
    .tree li::after{
        right: auto; left: 50%;
        border-left: 1px solid #ccc;
    }

    /*We need to remove left-right connectors from elements without 
    any siblings*/
    .tree li:only-child::after, .tree li:only-child::before {
        display: none;
    }

    /*Remove space from the top of single children*/
    .tree li:only-child{ padding-top: 0;}

    /*Remove left connector from first child and 
    right connector from last child*/
    .tree li:first-child::before, .tree li:last-child::after{
        border: 0 none;
    }
    /*Adding back the vertical connector to the last nodes*/
    .tree li:last-child::before{
        border-right: 1px solid #ccc;
        border-radius: 0 5px 0 0;
        -webkit-border-radius: 0 5px 0 0;
        -moz-border-radius: 0 5px 0 0;
    }
    .tree li:first-child::after{
        border-radius: 5px 0 0 0;
        -webkit-border-radius: 5px 0 0 0;
        -moz-border-radius: 5px 0 0 0;
    }

    /*Time to add downward connectors from parents*/
    .tree ul ul::before{
        content: '';
        position: absolute; top: 0; left: 50%;
        border-left: 1px solid #ccc;
        width: 0; height: 20px;
    }

    .tree li a{
        border: 1px solid #ccc;
        padding: 5px 10px;
        text-decoration: none;
        color: #666;
        font-family: arial, verdana, tahoma;
        font-size: 11px;
        display: inline-block;

        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;

        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
    }

    /*Time for some hover effects*/
    /*We will apply the hover effect the the lineage of the element also*/
    .tree li a:hover, .tree li a:hover+ul li a {
        background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
    }
    /*Connector styles on hover*/
    .tree li a:hover+ul li::after, 
    .tree li a:hover+ul li::before, 
    .tree li a:hover+ul::before, 
    .tree li a:hover+ul ul::before{
        border-color:  #94a0b4;
    }

Answer 1

你要实现的是递归。你有一个树状数据结构，你想在渲染时遍历它。

我建议创建一个可以递归调用自身以呈现任何子项的组件 (subordinates)。

employees.component.ts

@Component({
  selector: 'employees',
  templateUrl: './employees.component.html'
})
export class EmployeesComponent  {
  @Input() employees: Employee[];
}

<ul *ngIf="employees">
  <li *ngFor="let employee of employees">
    <div>{{employee.name}}</div>
    <div>{{employee.type}}</div>
    <div *ngIf="employee.subordinates?.length > 0">
      <employees [employees]="employee.subordinates"></employees>
    </div>
  </li>
</ul>

员工将呈现 @Input() 属性中提供的 Employee 数组。如果任何 Employee 有任何下属，该组件将使用这些下属作为 @Input() 属性调用自己。等等...

这需要从您的初始数据开始，它也应该是一个数组。

app.component.ts

employees: Employee[] = [{
  name: "Iron Man",
  //... etc
}];

<employees [employees]="employees"></employees>

演示：https://stackblitz.com/edit/angular-nfphsl

如何遍历包含 angular 中同类数组的数组

How to iterate through an array which contains array of same kind in angular

arrays

angular-ng-if

angular