配列から角度2のアイテムをロードする

Question

私は、3つのフロントエンドフレームワークのパフォーマンスをtotテストすることをお勧めします。 AngularJS Angular 2とEmberJSです。

現在、パフォーマンスをテストするために数値配列から1000個のオブジェクトをロードしようとしています。私は、ページをロードするときに、配列からHTMLリストに項目をロードすることに困難があった。

app.component.ts：

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <input type="button" value="load items"> 
<ul> 
<li (load)="ngOnInit() "*ngFor="let number of numberArray"> 
<span class="badge">{{number}}</span> 
<li> 
</ul>` 
}) 




export class AppComponent implements OnInit { 
    ngOnInit(): void { 
    var numberArray: Array<number> = []; 

    for (var i = 0; i < 1000; i++) { 
     numberArray.push(i); 
    } 
    console.log(numberArray); 
    } 

}; 

私の問題を明確にする： 私はページ をロードするとき、私の配列から1000年のオブジェクトをロードしたい私はあなたの答えを楽しみにして

Answer 1

ますnumberArrayをAppComponentクラスにバインドする必要があります。これにより、htmlに公開されます。

のでngOnInit()機能ouside numberArray: Array<number> = [];にvar numberArray: Array<number> = [];を変更して、それが好きですthis

を経由してアクセスしてください。

export class AppComponent implements OnInit { 
numberArray: Array<number> = []; 
    ngOnInit(): void {  
    for (var i = 0; i < 1000; i++) { 
     this.numberArray.push(i); 
    } 
    console.log(numberArray); 
    }  
}; 

Answer 2

を単に*ngIfの内側にあなたの必要なHTMLコードを使用

<div *ngIf="numberArray.length > 0"> 
<input type="button" value="load items"> 
<ul> 
<li (load)="ngOnInit() "*ngFor="let number of numberArray"> 
<span class="badge">{{number}}</span> 
<li> 
</ul> 
<div> 

を次のようにを定義するグローバル変数としての変数