javascript - 在Angular 2中从数组加载项目

我希望测试三个前端框架的性能。 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个对象
我期待你的答案

最佳答案

您必须将numberArray绑定到AppComponent类，以便它可以暴露给html。

因此，将var numberArray: Array<number> = [];更改为numberArray: Array<number> = [];取消ngOnInit()功能，然后通过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);
  }
};