Неможливо прив’язати до '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>

Додати 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. Дивно, що для вирішення цієї проблеми немає правильної помилки (у кутовій 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]
})

c. Якщо ви використовуєте окремий файл модуля для маршрутизації, то імпортуйте 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. Якщо ви вклали модуль, виконайте перший крок у цьому конкретному модулі

У моєму випадку 2-й метод вирішив мою проблему.
Сподіваюся, що це вам допоможе

Для мене проблема полягала в тому, що я не імпортував на замовлення модуль HouseModuleу своємуapp.module.ts . У мене був інший імпорт.

Файл: app.module.ts

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

@NgModule({
  imports: [
    HouseModule
  ]
})

Майбутні читачі

Перевірте кожне з наступного:

• Компонент оголошується в єдиному кутовому модулі
• Переконайтесь, що у вас є import { CommonModule } from '@angular/common';
• Перезавантажте IDE / редактор

Я розпочав роботу на базі Angular8 в реальному проекті отримав вищевказаний випуск, але при використанні "app-routing.module" ми забуваємо імпортувати "CommonModule". Не забудьте імпортувати!

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

@NgModule({
  imports: [
    CommonModule
]})

Це вирішить вашу помилку.

Ця проблема з’являється під час використання маршрутів, ми можемо відображати статичний вміст будь-якого модуля, але при спробі використання ані функціональності, наприклад * ngIg не працює, для роботи потрібно сказати @Ruben Szeker, потрібно буде додати компонент до app.module.ts при імпорті [], для завершення закриття або вбивства виконання фактичності сервера і повторного запуску ng serve буде вирішено проблему. якщо це не допоможе тобі, спробуй іншим способом.

Мені шкода за мою погану англійську мову.

У мене виникла проблема через ** замість *

*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 маршрути: маршрути = [

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

   {path: '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 як у дочірньому модулі, так і в компоненті