Невозможно связать с 'ngForOf', поскольку это не известное свойство tr (окончательная версия)

Я использую Angular2 Final release (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>

Ответ 1

Добавьте BrowserModule для imports: [] в @NgModule() если это корневой модуль (AppModule), в противном случае CommonModule.

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

Ответ 2

В моем случае проблема заключалась в том, что мой товарищ по команде упомянул *ngfor в шаблонах вместо *ngFor. Странно, что нет правильной ошибки для решения этой проблемы (в Angular 4).

Ответ 3

Вы должны импортировать CommonModule в модуль, где вы используете эти встроенные директивы, такие как ngFor, ngIf и т.д.

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


@NgModule({
  imports: [
    CommonModule
  ]
})

export class ProductModule { }

Ответ 4

То, что нужно запомнить:

Когда используются пользовательские модули (модули, отличные от AppModule), необходимо импортировать в них общий модуль.

yourmodule.module.ts

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

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

Ответ 5

Если вы создаете свой собственный модуль, добавьте CommonModule в импорт в свой собственный модуль

Ответ 6

Пользовательскому модулю нужен общий модуль

import {CommonModule} из "@angular/common";

@NgModule ({import: [CommonModule]})

Ответ 7

У меня была та же ошибка, но у меня был импортирован CommonModule. Вместо этого я оставил запятую там, где ее не должно быть из-за копирования/вставки при разбиении модуля:

@NgModule({
    declarations: [
        ShopComponent,
        ShoppingEditComponent
    ],
    imports: [
        CommonModule,
        FormsModule,
        RouterModule.forChild([
            { path: 'shop', component: ShopComponent }, <--- offensive comma
        ])
    ]
})

Ответ 8

При использовании "app-routing.module" мы забываем импортировать "CommonModule". Не забудьте импортировать!

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