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

Я использую финальную версию Angular2 (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>

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

// older Angular versions
// import {BrowserModule, CommonModule} from '@angular/common';

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

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

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

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


@NgModule({
  imports: [
    CommonModule
  ]
})

export class ProductModule { }

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

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

yourmodule.module.ts

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

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

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

Это также может произойти, если вы не объявите компонент маршрута в своем функциональном модуле. Так например:

feature.routing.module.ts:

...
    {
        path: '',
        component: ViewComponent,
    }
...

feature.module.ts:

     imports: [ FeatureRoutingModule ],
     declarations: [],

Обратите внимание, что ViewComponent отсутствует в массиве объявлений, хотя он должен быть.

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

импортировать {CommonModule} из "@ angular / common";

@NgModule ({импорт: [CommonModule]})

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

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

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

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

app.module.ts исправлен и изменен на: импорт BrowserModule в модуль вашего приложения

import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  declarations: [
    AppComponent    
  ],
  imports: [
    BrowserModule, 
  ],     
  providers: [],
  bootstrap: [AppComponent]
})

Я получал ту же ошибку, вы можете исправить ее одним из следующих способов:

1. Если у вас нет вложенного модуля

   а. Импортируйте CommonModule в свой модуль приложения

   б. Импортируйте свой компонент, в который вы добавляете * ngFor в модуле приложения , определите в объявлениях

// file App.modules.ts
@NgModule({
  declarations: [
    LoginComponent // declarations of your component
  ],
  imports: [
    BrowserModule
    DemoMaterialModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [
    ApiService, 
    CookieService, 
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ApiInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})

с. Если вы используете отдельный файл модуля для маршрутизации, импортируйте CommonModule в свой модуль маршрутизации, иначе импортируйте CommonModule в свой модуль приложения.

// file app.routing.modules.ts
import { LoginComponent } from './login/login.component';
import { CommonModule } from "@angular/common";

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'login', component: LoginComponent }
];

@NgModule({
  imports: [RouterModule,RouterModule.forRoot(routes), CommonModule],
  exports: [RouterModule]
})

2. Если у вас есть вложенный модуль, выполните 1-й шаг в этом конкретном модуле.

В моем случае 2-й метод решил мою проблему.
Надеюсь, что это поможет вам

Для меня проблема заключалась в том, что я не импортировал заказной модуль HouseModuleв свой app.module.ts. У меня был другой импорт.

Файл: app.module.ts

import { HouseModule } from './Modules/house/house.module';

@NgModule({
  imports: [
    HouseModule
  ]
})

Будущие читатели

Проверьте каждое из следующего:

• Компонент объявлен в SINGLE угловом модуле
• Убедитесь, что у вас есть import { CommonModule } from '@angular/common';
• Перезагрузите IDE / редактор

Я начал работать с базовым живым проектом Angular8, у меня возникла вышеуказанная проблема, но при использовании «app-routing.module» мы забываем импортировать «CommonModule». Не забудьте импортировать!

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

@NgModule({
  imports: [
    CommonModule
]})

Это решит вашу ошибку.

Эта проблема возникает при использовании Routes, мы можем отображать статический контент любого модуля, но при попытке использовать такую ​​функциональность, как * ngIg, не работает, для работы, например, @Ruben Szeker, необходимо добавить компонент в app.module.ts on import [], для завершения закрытия или уничтожения фактического выполнения сервера и повторного запуска сервера, проблема будет решена. Если это не сработает для вас, я попробую другой способ.

Прошу прощения за мой плохой английский.

У меня возникла проблема из-за ** вместо *

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"

Я столкнулся с аналогичной ошибкой ( *ngIf), даже если весь мой импорт был в порядке и компонент был отрисован без каких-либо других ошибок + маршрутизация была в порядке.

В моем случае AppModuleэтот конкретный модуль не включался. Странно то, что он не жаловался на это, но это может быть связано с тем, как работает Ivy ng serve(вид загружает модули в соответствии с маршрутизацией, но его зависимости не рассматриваются).

Просто потерял ~ 1 час из-за этой ошибки только на одной конкретной странице. Пробовал все ответы здесь, но, наконец, решение заключалось в том, чтобы восстановить все это с помощью ng, проблема просто исчезла ...

Пожалуйста, убедитесь

1. В директивах нет синтаксической ошибки

2. Браузер (в модуле приложения) и общие (в другом / дочернем) модули импортируются (то же, что упомянул Гюнтер Цохбауэр )

3. Если в приложении есть маршруты, то модуль маршрута следует импортировать в модуль приложения.

4. Модуль всех маршрутизируемых компонентов также импортируется в модуль приложения, например: app-routing.module.ts выглядит следующим образом:

   const routes: Routes = [

   {путь: '', компонент: CustomerComponent},

   {путь: 'admin', компонент: AdminComponent}

   ];

Затем модуль приложения должен импортировать модули CustomerComponent и AdminComponent в @NgModule ().

Даже если я столкнулся с той же проблемой, я попробовал все ответы здесь, но простое изменение помогло мне решить эту проблему, вместо того, чтобы включать * ngFor в trтег, я включил его в tbodyтег. Надеюсь, это кому-то поможет.

<tbody *ngFor="let product of products; let i=index">
        <tr >
            <td>{{product.id}}</td>
            <td>{{product.name}}</td>
            <td>{{product.description}}</td>
            <td>{{product.quantity}}</td>
            <td>
                <button type="button" >Update</button>
                <button type="button" (click)="crudService.delete(product.id)">Remove</button>
            </td>
        </tr>
    </tbody>

импортировать CommonModule как в дочерний модуль, так и в компонент