Angular 2*ng不工作

Question

以下是我的组件:

import { Component } from 'angular2/core';

@Component({
  selector: 'test',
  template: 
     `
      <ul >
        <li *ngFor="let t of test">
         <span >{{t}}</span>
        </li>
      </ul>
     `
})

export class TestComponent implements OnInit{
  test: string[];
  constructor(){
    this.test = ["Saab", "Volvo", "BMW"];
  }
}

我尝试加载组件时收到以下错误:

  EXCEPTION: Template parse errors:
    Can't bind to 'ngFor' since it isn't a known native property ("<ul >
        <li [ERROR ->]*ngFor="let t of test">
            <span >{{t}}</span>
        </li>
    "): 

另外,我不确定在导入Component时是否应该使用'@ angular/core'或'angular2/core'.

Answer 1

我遇到了同样的问题，经过大量搜索和测试，我发现我忘记在模块的“声明”中声明我的组件。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

import { SearchComponent } from './search.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: '', component: SearchComponent },
    ])
  ],
  exports:[
  ],
  declarations: [
    SearchComponent 
  ],
})
export class SearchModule { }

Answer 2

可能会出现此问题,因为您没有将公共模块导入到当前模块中.

尝试导入

import { CommonModule } from "@angular/common";

进入当前模块,看看问题是否已解决.

公共模块添加角度2的所有内置指令.

看到commonModule文档通过angular.io

希望有帮助:)

Answer 3

你的模板应该是：

<ul>
    <li *ngFor="#t of test">
        <span >{{t}}</span>
    </li>
</ul>

或者在新版本中这样：

<ul>
    <li *ngFor="let t of test">
        <span>{{t}}</span>
    </li>
</ul>