如何显示元素内部元素的所有对象,直到Angular中的最后一个元素?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (6)

就在此刻,我正试图解决我在Angular中遇到的问题。问题是我有一个大对象,它在一个数组中包含多个相同类型的对象,它们也可以在其数组中包含相同的对象。我知道这听起来有点复杂,但我会尝试在其余文本中更好地解释它。

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

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

在这里,您可以看到我用HTML创建的HTML代码,以查看对象中的每个对象和内部对象。我面临的问题是我只能看到第一个对象和该对象内的对象。但到目前为止我无法让它自动显示所有对象直到最后。正如你所看到的那样,我用硬件编写了一个硬编码的第二层。

<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,直到我在最后一个对象中包含变量。

提问于
用户回答回答于

您可以通过使用递归组件来实现这一点。这里详细解释了它们。

粗略解释,您希望在自己的模板中使用组件。移动需要在其自己的组件内递归运行的代码,并根据children属性的存在使用组件本身。

@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;
}

然后,在模板中,只需使用 <app-recursive [entry]="parameterRoot"></app-recursive>

扫码关注云+社区

领取腾讯云代金券