2017-02-17 75 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()"> 

相关问题