Question

目前，我正在尝试解决Angular内部存在的问题。问题是我有一个大对象，它在一个数组中包含多个相同类型的对象，也可以在其数组内包含相同的对象。我知道这听起来有些复杂，但是我将在本文的其余部分中尝试更好地解释它。

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

我已经尝试过一个笨拙的单词/句子来查找具有相同问题的人，但是找不到。也许我试图以不同/不正确的方式解释我的问题？我不知道，但是我面对这个问题已经有几天了，我摆脱了它。

在下面，您可以看到我的HTML代码，该代码由angular组成，可以查看对象中的每个对象以及其中的对象。我面临的问题是，我只能看到第一个对象以及该对象中的对象。但到目前为止，我无法让它自动显示所有对象，直到最后。如您所见，我在用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>

我知道，我的英语不好，我对此表示歉意。但是我现在确实需要帮助。我需要显示div内部的div，直到我在最后一个对象中如何包含变量为止。

Answer 1

您可以通过使用递归组件来实现。 here对其进行了详细说明。

粗略地解释，您想在其自己的模板内使用组件。根据{{1}}属性的存在，将需要递归运行的代码移到其自己的组件中，并在其中使用该组件本身。

children

然后，在模板内，只需使用@Component({ selector: 'app-recursive' template: ` <ng-container*ngFor="let child of entry.children">  <app-recursive *ngIf="child.children && child.children.length > 0" [entry]="child"></app-recursive> </ng-container> ` }) class AppRecursiveComponent { @Input() entry:Parameter; }

如何显示元素中元素中的所有对象，直到Angular中的最后一个元素？

1 个答案: