'tr'(최종 릴리스)의 알려진 속성이 아니기 때문에 'ngForOf'에 바인딩 할 수 없습니다.

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>

추가 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에서).

ngFor, ngIf 등과 같은 내장 지시문을 사용하는 모듈에서 'CommonModule'을 가져와야합니다.

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는 선언 배열에 없지만 있어야합니다.

맞춤 모듈에는 공통 모듈이 필요합니다.

"@ angular / common"에서 {CommonModule} 가져 오기;

@NgModule ({imports : [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. 중첩 된 모듈이있는 경우 해당 특정 모듈에서 첫 번째 단계를 수행하십시오.

제 경우에는 두 번째 방법으로 문제가 해결되었습니다.
이것이 당신을 도울 수 있기를 바랍니다

나에게 문제는 HouseModule내 .NET Framework 에서 사용자 정의 모듈 을 가져 오지 않았다는 것 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와 같은 ani 기능을 사용하려고하면 작동하지 않습니다. @Ruben Szeker와 같은 작업이 필요한 경우 app.module.ts에 구성 요소를 추가해야합니다. imports []에서 서버를 종료하거나 종료하고 서버를 다시 실행하면 문제가 해결됩니다. 이것이 당신에게 효과가 없다면, 다른 방법을 시도하십시오.

영어가 안 좋아서 미안 해요.

대신 ** 때문에 문제가 발생했습니다 *

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"

비슷한 오류가 발생했습니다 (*ngIf모든 가져 오기가 정상이고 구성 요소가 다른 오류없이 렌더링 된 경우에도 ) .

제 경우에는 AppModule특정 모듈을 포함하지 않았습니다. 이상한 점은 이것에 대해 불평하지 않았지만 이것은 Ivy가 작동하는 방식과 관련이있을 수 있다는 것입니다 ng serve(라우팅에 따라 모듈을로드하지만 종속성은 고려되지 않음).

이 오류로 인해 한 페이지에서 ~ 1 시간을 잃었습니다. 여기에서 모든 답변을 시도했지만 마침내 해결책은 ng로 전체를 다시 빌드하는 것이었고 문제는 사라졌습니다 ...

그래서 확인하십시오

1. 지시문에 구문 오류가 없습니다.

2. 브라우저 (앱 모듈) 및 공통 (기타 / 하위) 모듈을 가져 옵니다 ( 위에서 언급 한 Günter Zöchbauer 와 동일 ).

3. 애플리케이션에 라우트가있는 경우 라우트 모듈을 App Module로 가져와야합니다.

4. 라우팅 된 모든 구성 요소의 모듈은 App Module에서도 가져옵니다. 예 : app-routing.module.ts는 다음과 같습니다.

   const 경로 : 경로 = [

   {경로 : '', 구성 요소 : CustomerComponent},

   {경로 : 'admin', 구성 요소 : AdminComponent}

   ];

그런 다음 App 모듈은 @NgModule ()에서 CustomerComponent 및 AdminComponent의 모듈을 가져와야합니다.

같은 문제에 직면했지만 여기에서 모든 답변을 시도했지만 간단한 변경으로 * 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 가져 오기