'Tr'nin bilinen bir özelliği olmadığı için' ngForOf'a bağlanamıyor (son sürüm)

Angular2 Final sürümünü (2.1.0) kullanıyorum. Şirketlerin bir listesini görüntülemek istediğimde bu hatayı aldım.

içinde file.component.ts:

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

içinde file.component.html:

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

Ekle BrowserModuleiçin imports: []de @NgModule()bu kök modülü (eğer AppModule) aksi CommonModule.

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

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

Benim durumumda sorun, takım arkadaşımın *ngforyerine şablonlarda bahsetmesiydi *ngFor. Bu sorunu ele almak için doğru bir hata olmaması garip (Angular 4'te).

NgFor, ngIf vb. Gibi bu yerleşik direktifleri kullandığınız modüle 'CommonModule' aktarmanız gerekir.

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


@NgModule({
  imports: [
    CommonModule
  ]
})

export class ProductModule { }

Hatırlanacak şeyler:

Özel modüller kullanıldığında (AppModule dışındaki modüller), o zaman içindeki ortak modülü içe aktarmak gerekir.

yourmodule.module.ts

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

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

Kendi modülünüzü yapıyorsanız, kendi modülünüzde içe aktarmalara CommonModule ekleyin

Bu, özellik modülünüzde bir yol bileşeni bildirmezseniz de olabilir. Yani mesela:

feature.routing.module.ts:

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

feature.module.ts:

     imports: [ FeatureRoutingModule ],
     declarations: [],

ViewComponent öğesinin bildirimler dizisinde olmadığına dikkat edin , oysa olması gerekir.

Özel Modül Ortak modül gerektirir

{CommonModule} öğesini "@ angular / common" içinden içe aktarın;

@NgModule ({içe aktarmalar: [CommonModule]})

"App-routeing.module" kullanıldığında "CommonModule" içe aktarmayı unutuyoruz. İçe aktarmayı unutmayın!

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

Aynı hatayı aldım ama CommonModule içe aktarıldı. Bunun yerine, bir modülü ayırırken kopyala / yapıştır nedeniyle olmaması gereken yerde bir virgül bıraktım:

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

ithalat: sabitlenmiş ve değiştirilemez app.module.ts BrowserModule uygulama modülünde

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

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

Aynı hatayı alıyordum, bu yöntemlerden biriyle düzeltebilirsiniz:

1. Herhangi bir iç içe modülünüz yoksa

   a. İçe CommonModule sizin de App modülü

   b. Eklediğiniz sizin Bileşen içe * ngFor içinde App Modülü , tanımladığınız bildirimleri

// 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. Eğer içe aktar sonra yönlendirme için ayrı modül dosyası kullanıyorsanız CommonModule başka İthalat sizin Yönlendirme modülünde CommonModule sizin de App modülü

// 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. İç içe modülünüz varsa, o modülde 1. adımı gerçekleştirin

Benim durumumda, 2. yöntem sorunumu çözdü.
Umarım bu sana yardımcı olur

Benim için sorun, özel yapım modülü HouseModulebenim app.module.ts. Diğer ithalatları da aldım.

Dosya: app.module.ts

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

@NgModule({
  imports: [
    HouseModule
  ]
})

Gelecekteki Okuyucular

Aşağıdakilerin her birini kontrol edin:

• Bileşen TEK bir açısal modülde tanımlanmıştır
• Sahip olduğundan emin ol import { CommonModule } from '@angular/common';
• IDE / düzenleyiciyi yeniden başlatın

Angular8 temel canlı projeye başladım, yukarıdaki sorunu aldım ancak "app-routeing.module" kullandığınızda "CommonModule" içe aktarmayı unutuyoruz. İçe aktarmayı unutmayın!

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

@NgModule({
  imports: [
    CommonModule
]})

Hatanızı çözecektir.

Bu sorun, Routes kullanılırken ortaya çıkar, herhangi bir modülün statik içeriğini görüntüleyebiliriz, ancak * ngIg gibi ani işlevlerini kullanmaya çalışırken çalışmaz, çünkü @Ruben Szeker gibi bir iş gerekir, gerekli Bileşeni app.module.ts'e eklemeniz gerekir. aktarımlarda [], gerçekliği yürütme sunucusunu kapatmak veya sonlandırmak ve hizmet çalıştırmayı yeniden denemek sorunu çözecektir. bu senin için işe yaramazsa, başka bir yol deneyeceğim.

Kötü ingilizcem için özür dilerim.

** yerine * yüzünden bir sorun yaşadım

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"

Benzer bir hatayla karşılaştım (*ngIfTüm içe aktarmalarım iyi olsa ve bileşen başka bir hata olmadan işlenmiş olsa bile ) + yönlendirme tamam.

Benim durumumda AppModulebu belirli modül dahil değildi. Garip olan şey bundan şikayet etmemesidir, ancak bu Ivy'nin nasıl çalıştığı ile ilgili olabilir ng serve(yönlendirmeye göre yük modülleri türü, ancak bağımlılıkları dikkate alınmaz).

Sadece belirli bir sayfada, bu hatada ~ 1 saat kaybettim. Buradaki tüm cevapları denedim, ama nihayet çözüm, her şeyi ng ile yeniden inşa etmekti, sorun ortadan kayboldu ...

Bu yüzden lütfen emin ol

1. Yönergelerde sözdizimi hatası yok

2. Tarayıcı (Uygulama Modülünde) ve Ortak (diğer / çocuk) Modüller içe aktarılır ( Yukarıda belirtilen Günter Zöchbauer ile aynı )

3. Uygulamada rotalarınız varsa, rota modülü Uygulama Modülüne aktarılmalıdır

4. Yönlendirilen tüm bileşenin Modülleri de Uygulama Modülüne aktarılır, örneğin: app-routing.module.ts aşağıdaki gibidir:

   const yolları: Rotalar = [

   {yol: '', bileşen: CustomerComponent},

   {yol: 'admin', bileşen: AdminComponent}

   ];

Daha sonra Uygulama modülü CustomerComponent ve AdminComponent modüllerini @NgModule () içinde içe aktarmalıdır.

Aynı sorunla karşılaşsam bile, tüm cevapları burada denedim, ancak basit bir değişiklik, * ngFor'u dahil etmek yerine bu sorunu çözmeme yardımcı oldu tr etiketine dahil etmek etiketetbody . Umarım birine yardımcı olur.

<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'u hem alt modülde hem de bileşende içe aktarın