Как показать все объекты из элементов внутри элементов до последнего элемента в Angular? - PullRequest
Новая
       5

Как показать все объекты из элементов внутри элементов до последнего элемента в Angular?

0 голосов
/ 19 мая 2019

В данный момент я пытаюсь решить проблему, возникшую у меня в Angular.Проблема в том, что у меня есть один большой объект, который содержит несколько объектов одного типа в массиве, который также может содержать одни и те же объекты внутри его массива.Я знаю, что это звучит немного сложно, но я постараюсь объяснить это лучше в остальной части моего текста. 

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

Я уже пробовал несколько слов / предложений, чтобы найти кого-то с тем же вопросом, но не смогнайти один.Может быть, я пытаюсь объяснить свой вопрос иначе / не так?Я не знаю, но я сталкиваюсь с этой проблемой в течение нескольких дней, и я избавился от нее.

Ниже здесь вы можете увидеть мой 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>

Я знаю, мой плохой английский очень плохой, и я хотел бы извиниться за это.Но мне действительно нужна помощь для этого прямо сейчас.Мне нужно показать div внутри div, пока я не нахожусь в последнем объекте, который содержит переменные.

1 Ответ

1 голос
/ 19 мая 2019

Этого можно добиться с помощью рекурсивных компонентов.Они подробно объяснены здесь .

Грубо говоря, вы хотите использовать компонент внутри своего собственного шаблона.Переместите код, который необходимо выполнить рекурсивно, в свой собственный компонент и используйте там сам компонент, основываясь на наличии свойства 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>

...