是否可以在Angular 2中从JS创建HTML项目?

时间:2017-02-17 12:25:24

标签: javascript angular typescript

我有简单的GET请求,它会显示一些数据。

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 个答案:

答案 0 :(得分: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
   }
}

in html

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