Html 如何显示从元素中的元素到角度中的最后一个元素的所有对象？

现在，我正试图解决一个问题。问题是我有一个大对象，它在一个数组中包含多个相同类型的对象，也可以在它的数组中包含相同的对象。我知道这听起来有点复杂，但我会在课文的其余部分更好地解释它

export class Parameter {
  name: number;
  subject: string;
  type: string;
  comparison: string;
  colour: string;
  givenValue: number;
  tree: string;
  children: Parameter[];
}

我已经试了一百个单词/句子来找到有同样问题的人，但找不到一个。也许我试图解释我的问题不同/不对？我不知道，但是我已经面对这个问题好几天了，我已经摆脱了它

下面你可以看到我用angular编写的HTML代码，可以看到对象中的每个对象和其中的对象。我面临的问题是，我只能看到第一个对象，以及该对象中的对象。但我无法得到的是，到目前为止，让它自动显示所有对象，直到结束。正如你所看到的，我用ngfor硬编码了第二层

<div class="accordion" *ngFor="let currentParameter of smartContract.parameters">
  <mat-accordion>
    <mat-expansion-panel>

      <mat-expansion-panel-header>
        <mat-panel-title>
          Parameter {{currentParameter.name}}
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div class="parameter">
        <div class="inputs">
          <div class="input">
            <mat-form-field>
              <mat-select placeholder="Kies een categorie">
                <mat-option *ngFor="let category of categories"
                            [value]="category.value"
                            (click)="currentParameter.subject = category.value"
                > {{category.viewValue}} </mat-option>
              </mat-select>
            </mat-form-field>
          </div>
        </div>
      </div>

      <mat-expansion-panel *ngFor="let currentParameterOfChild of currentParameter.children" > <!-- dit is de plaats van een nieuwe parameter in een nieuwe laag - begin -->
        <mat-expansion-panel-header>
          <mat-panel-title>
            Parameter {{currentParameterOfChild.name}}
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div class="parameter">
          <div class="inputs">
            <div class="input">
              <mat-form-field>
                <mat-select placeholder="Kies een categorie">
                  <mat-option *ngFor="let category of categories"
                              [value]="category.value"
                              (click)="currentParameterOfChild.subject = category.value"
                  > {{category.viewValue}} </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
          </div>
        </div>

        <div class="add-parameter-layer">
          <button mat-mini-fab class="plusbutton" [mat-menu-trigger-for]="param1" type="button">
            <mat-icon aria-label="Icon-button with plus">add</mat-icon>
          </button>
          <mat-menu #param1="matMenu">
            <button mat-menu-item type="button" >
              <span (click)="newParameterNewLayer(currentParameterOfChild.name, currentParameterOfChild.tree)">Nieuwe parameter in nieuwe laag</span>
            </button>
            <button mat-menu-item type="button">
              <span (click)="newParameter()">Nieuwe parameter in deze laag</span>
            </button>
          </mat-menu>
        </div>
      </mat-expansion-panel> <!-- dit is de plaats van een nieuwe parameter in een nieuwe laag - begin -->

      <div class="add-parameter-layer">
        <button mat-mini-fab class="plusbutton" [mat-menu-trigger-for]="param1" type="button">
          <mat-icon aria-label="Icon-button with plus">add</mat-icon>
        </button>
        <mat-menu #param1="matMenu">
          <button mat-menu-item type="button" >
            <span (click)="newParameterNewLayer(currentParameter.name, currentParameter.tree)">Nieuwe parameter in nieuwe laag</span>
          </button>
          <button mat-menu-item type="button">
            <span (click)="newParameter()">Nieuwe parameter in deze laag</span>
          </button>
        </mat-menu>
      </div>

    </mat-expansion-panel>
  </mat-accordion>
</div>

参数{{currentParameter.name}
{{category.viewValue}}
参数{currentParameterOfChild.name}
{{category.viewValue}}
添加
Nieuwe laag中的Nieuwe参数
deze laag中的Nieuwe参数
添加
Nieuwe laag中的Nieuwe参数
deze laag中的Nieuwe参数

---

我知道，我的英语很差，我想为此道歉。但我现在真的需要帮助。我需要在div的内部显示div，直到我在最后一个对象中为止。您可以通过使用递归组件来实现这一点。对它们进行了详细的解释

大致说来，您希望在自己的模板中使用组件。根据

子属性的存在，将需要递归运行的代码移动到它自己的组件中，并在那里使用组件本身

@Component({
   selector: 'app-recursive'
   template: `
      <ng-container*ngFor="let child of entry.children">
          <!-- Your content, omitted for readability -->
          <app-recursive *ngIf="child.children && child.children.length > 0" [entry]="child"></app-recursive>
      </ng-container>
   `
})
class AppRecursiveComponent {
   @Input() entry:Parameter;
}

@组件({
选择器：“应用程序递归”
模板：`
`
})
类附件组件{
@Input（）条目：参数；
}

然后，在模板中，只需使用