Angular mat accordion在递归调用其中的角度分量时滞后
我在accordion中递归调用一个组件,以显示树状结构 该代码用于短输入,但在嵌套数据的递归调用上滞后 它就像一个json树Angular mat accordion在递归调用其中的角度分量时滞后,angular,recursion,tree,components,angular8,Angular,Recursion,Tree,Components,Angular8,我在accordion中递归调用一个组件,以显示树状结构 该代码用于短输入,但在嵌套数据的递归调用上滞后 它就像一个json树 //sample.component.html <app-tree [input]="data"></app-tree> //tree.component.html <mat-accordion> <mat-expansion-panel hideToggle="true" (click)="tog
//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之前,如代码所示,但效果不是很好
打开手风琴时,有没有办法加载部件
谢谢 回答您的问题: 打开手风琴时,有没有办法加载部件 是的,有,但我不确定它是否能解决滞后问题。无论如何,请尝试将扩展面板的内容包装在包含MateExpansionPanelContent属性的ng模板中。它将延迟加载其内容,请参见 {{input.buttonName} {{input.key} //我在这里 {{item.key}}:{{item.value}
谢谢成功了!。。。这也解决了批量数据的滞后问题,因为ng模板限制accordion加载数据,除非对其进行扩展。我很感谢你。