мат-аккордеон отстает при рекурсивном вызове в нем компонента angular - PullRequest
Новая
       26

мат-аккордеон отстает при рекурсивном вызове в нем компонента angular

0 голосов
/ 07 мая 2020

Я вызываю компонент рекурсивно аккордеоном, чтобы показать древовидную структуру.

Код работает для короткого ввода, но отстает от рекурсивных вызовов для вложенных данных

как дерево json. 

//sample.component.html
<app-tree [input]="data"></app-tree>


//tree.component.html

    <mat-accordion>
        <mat-expansion-panel hideToggle="true" (click)="toggleTree($event, input)">
          <mat-expansion-panel-header>
            <mat-panel-title>
                <mat-icon>{{input.buttonName}}</mat-icon>
                {{input.key}}
            </mat-panel-title>
          </mat-expansion-panel-header>
          <ul class="main-obj">   // tried *ngIf here
             <div class="obj-list" *ngFor="let item of input.value; trackBy: trackChanges">
                <li>
                  {{item.key}}: {{item.value}}
                </li>
                <li style="list-style: none; margin-left: -40px;">
                    <app-tree [input]="item"></app-tree>
                </li>
            </div>
         </ul>
        </mat-expansion-panel>
    </mat-accordion>

//tree.component.ts

    import { Component, OnInit, Input, Output } from '@angular/core';
    import { EventEmitter } from 'events';

    @Component({
      selector: 'app-tree',
      templateUrl: './tree.component.html',
      styleUrls: ['./tree.component.css']
    })

    export class TreeComponent implements OnInit {
        @Input() input: any;

        @Output() click = new EventEmitter();

        constructor(){}

        ngOnInit(){
        }

        toggleTree(event, toggleButton) {
            event.stopPropagation();
            if(toggleButton.buttonName == 'add')  
                toggleButton.buttonName = 'remove';
            else
                toggleButton.buttonName = 'add';
        };

        trackChanges = (index) => {
            return index;
        }
    }

Я пробовал разместить ngIf (как показано в коде перед ngFor), но это не так эффективно.

Есть ли способ загрузить компонент при открытии гармошки?

Спасибо!

1 Ответ

1 голос
/ 07 мая 2020

Отвечая на ваш вопрос:

Есть ли способ загрузить компонент при открытии аккордеона?

Да, есть, но я не уверен, что это произойдет решить запаздывающую проблему. В любом случае попробуйте обернуть содержимое панели расширения в ng-template, содержащее атрибут matExpansionPanelContent. Он будет лениво загружать свое содержимое (см. документы ). 

<mat-accordion>
  <mat-expansion-panel hideToggle="true" (click)="toggleTree($event, input)">
    <mat-expansion-panel-header>
      <mat-panel-title>
        <mat-icon>{{input.buttonName}}</mat-icon>
        {{input.key}}
      </mat-panel-title>
    </mat-expansion-panel-header>

    <ng-template matExpansionPanelContent>
      <ul class="main-obj">   // tried *ngIf here
        <div class="obj-list" *ngFor="let item of input.value; trackBy: trackChanges">
          <li>{{item.key}}: {{item.value}}</li>
          <li style="list-style: none; margin-left: -40px;">
            <app-tree [input]="item"></app-tree>
          </li>
        </div>
      </ul>
    </ng-template>
  </mat-expansion-panel>
</mat-accordion>
...