Angular 2-逐一加载动态组件 [英] Angular 2 - Load the dynamic components one by one

问题描述

<div *ngFor="let header of headers">    
    <widget [header]="header" (loaded)="onLoaded($event)"></widget>
</div>

如何基于"onLoaded"发射将标题一一绑定.基本上，我希望小部件在每次成功加载数据后逐一加载(输出方法onLoaded会发出布尔值).

How to bind headers one by one based on the 'onLoaded' emit. Basically, I want the widget to load one by one after each successful data load(output method onLoaded emits boolean).

推荐答案

这是很奇怪的要求，因此您可以像这样开始

Its very weird requirement so you can start like this

1)为循环创建空的新数组:any [] = [];

1) create empty new array forLoop: any[] = [];

2)在显示标题值之前(可能在ngonint()中)，将标题数组中的第一个元素添加到forLoop数组中

2) Before displaying headers values( may be in ngonint()) add first element from the headers array to forLoop array

   `forLoop.push(headers.Shift())`  // it will remove first element from the headers array and add into forLoop

3)现在显示循环数组

3) now display forLoop array

<div *ngFor="let header of forLoop;trackBy: trackByFn">    
    <widget [header]="header" (loaded)="onLoaded($event)"></widget>
</div>

 trackByFn(index, item) {
    return index; // or item.id
  }

4)在onLoaded方法上，从标头数组中删除第二个元素，添加到forloop数组中

4) on the onLoaded method remove second element from header array add into forloop array

onLoaded (){

  if(headers.length >0){
   forLoop.push(headers.Shift())
  }
}

5)继续执行此过程，直到headers数组为空

5) continue this process for till the headers array is empty

这篇关于Angular 2-逐一加载动态组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！