angular - *ngFor 在 Angular 2 中失败

Question

我正在尝试使用 *ngFor 访问对象数组。但它抛出控制台错误。我已经这样定义了数组。

     employees=[ 
        {name:'a',age:'25'},
        {name:'b',age:'35'}
        ];

在 html 模板文件中，我正在使用这样的 *ngFor 语句

        <ul>
         <li *ngFor="let employee of employees ; let i = index;">
           {{name}}
        </li>
       </ul>

浏览器抛出如下控制台错误(plukr是@http://plnkr.co/edit/0cBHaDM1mHvMf38NtQ7X?p=preview)

Error: Uncaught (in promise): Error: Error in :0:0 caused by: Array[2] 不是构造函数TypeError: Array[2] 不是构造函数 在新的 AppComponent ( http://run.plnkr.co/0tyHWvPl7PnWfPkm/app/app.component.ts!transpiled:15:26 ) 在新的 Wrapper_AppComponent

我对 Angular 2 有点陌生，非常感谢任何帮助。

Answer 1

错误

1. 您使用了 index.html 中的标记。
2. employees= new Array[2]; 不是实例化数组的方法。
3. names = new Array('qw','er');无效。
4. 没有使用构造函数来赋值。(不好的做法)

你的代码应该是

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

@Component({
  selector: 'my-app',
  template: `<h1>Hellotest {{name}}</h1>
  <ul>
         <li *ngFor="let name of names ; let j = index;">
           {{name}}
           </li>
       </ul>
        <ul>
         <li *ngFor="let employee of employees ; let i = index;">
           {{employee.name}}
        </li>
       </ul>
       `
})
export class AppComponent { 
  name = 'Angular';
  employees= new Array();
  names = new Array();
  constructor(){
  this.employees=[ 
    {name:'a',age:'25'},
    {name:'b',age:'35'}
    ];

  this.names=['qw','er'];
  console.log(this.employees);
  console.log(this.names);
  }
}

Updated plunker

如果你不想使用构造函数，那么你应该使用下面的变量声明

  name = 'Angular';
  employees:any[]= [ 
    {name:'a',age:'25'},
    {name:'b',age:'35'}
    ];
  names:Array<string> = ['qw','er'];

No Constructor plunker