5

以下是我的组件:

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>
    "): 

另外,我不确定在导入组件时是否应该使用“@angular/core”或“angular2/core”。

4

6 回答 6

13

可能会出现此问题,因为您尚未将公共模块导入到您正在使用的当前模块中。

尝试导入

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

进入您当前的模块并查看问题是否已解决。

通用模块添加了 Angular 2 中的所有内置指令。

参见 angular.io的commonModule 文档

希望有帮助:)

于 2017-05-22T19:29:37.357 回答
4

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

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 { }

于 2020-05-19T10:07:57.533 回答
0

对我来说,问题是我正在使用带有 HTML 加载器的 Webpack,该加载器在 Angular 编译之前最小化 HTML,从而*ngFor.

{
    test: /\.html$/,
    use: [ {
        loader: 'html-loader',
        options: {
        //minimize: true, // Make sure that you are not minimizing when using Angular
        removeComments: false,
        collapseWhitespace: false
    }
}
于 2018-05-31T16:48:28.870 回答
0

使用 Let 为我解决了这个问题

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

于 2016-11-28T21:45:14.507 回答
0

你的模板应该是:

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

或者在较新的版本中以这种方式:

<ul>
    <li *ngFor="let t of test">
        <span>{{t}}</span>
    </li>
</ul>
于 2016-06-14T21:28:02.513 回答
0

我经历过类似的行为。问题是我在我的 HTML 中包含了 Angular 2 的最小化版本。

如果是这样,请尝试包含 Angular 的未最小化文件

于 2016-06-14T22:07:56.187 回答