2017-02-17 129 views
1

我有簡單的GET請求,這會帶來一些數據顯示。是否可以在Angular 2中從JS創建HTML項目?

this.apiRequest.get(url) 
.map(response => response.json()) 
.subscribe(response => { 
    this.notes = response.notes 

    loader.dismiss() 
}, err => { 
    loader.dismiss() 
}) 

那麼我告訴它:

<ion-item *ngFor="let note of notes" text-wrap> 
    <!-- data --> 
</ion-item> 

的主要問題是,當有大量的notes裝載機駁回顯示所有項目之前。

我需要JS循環ngFor然後隱藏裝載機或HTML某種程度上禁用加載...

回答

1

這是不是你在找什麼,但希望能幫助

基本想法是提供ngFor循環完整的事件

創建組件

import { Component, Input, Output, EventEmitter } from '@angular/core'; 
@Component({ 
    selector: 'islast', 
    template: '<span></span>' 
}) 
export class LastDirective { 
    @Input() isLast: boolean; 
    @Output() onLastDone: EventEmitter<boolean> = new EventEmitter<boolean>(); 
    ngOnInit() { 
     if (this.isLast) 
     this.onLastDone.emit(true); //you can hide loader from here this is last element in ngfor 
    } 
} 

在HTML

<tr *ngFor="let sm of filteredMembers; let last = last; let i=index;" data-id="{{sm.Id}}"> 
    <td> 
     <islast [isLast]="last" (onLastDone)="modalMembersDone()"> 

相關問題