无法绑定到'ngForOf'，因为它不是'tr'的已知属性（最终版本）

Question

我正在使用Angular2 Final版本（2.1.0）。当我想显示公司列表时，我收到了这个错误。

在file.component.ts：

public companies: any[] = [
    { "id": 0, "name": "Available" },
    { "id": 1, "name": "Ready" },
    { "id": 2, "name": "Started" }
];

在file.component.html：

<tbody>
  <tr *ngFor="let item of companies; let i =index">
     <td>{{i}}</td>
     <td>{{item.name}}</td>
  </tr>
</tbody>

Answer 1

如果它是根模块（BrowserModule），则将imports: []添加到@NgModule()中的AppModule，否则为CommonModule。

import {BrowserModule, CommonModule} from '@angular/common';
..
..
@NgModule({
  imports: [BrowserModule, /* or CommonModule */],
  ..
})

Answer 2

在我的情况下，问题是我的队友在模板中提到*ngfor而不是*ngFor。奇怪的是没有正确的错误来处理这个问题（在Angular 4中）。

Answer 3

您必须在使用这些内置指令（如ngFor，ngIf等）的模块中导入“CommonModule”。

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


@NgModule({
  imports: [
    CommonModule
  ]
})

export class ProductModule { }

Answer 4

要记住的事情：

使用自定义模块（AppModule以外的模块）时，必须在其中导入公共模块。

yourmodule.module.ts

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

@NgModule({
  imports: [
    CommonModule
  ],
  exports:[ ],
  declarations: []
})

Answer 5

如果您要创建自己的模块，则在您自己的模块中的导入中添加CommonModule

Answer 6

自定义模块需要通用模块

从“@ angular / common”导入{CommonModule};

@NgModule（{imports：[CommonModule]}）

Answer 7

当使用“app-routing.module”时，我们忘记导入“CommonModule”。记得导入！

import { CommonModule } from "@angular/common";
@NgModule({  imports: [ CommonModule]})