無法綁定到“ngForOf”，因為它不是 Angular 9 中“tr”的已知屬性

Question

ngFor在我的應用程序中不起作用。

我將我的應用程序拆分為單獨的模塊，並包含import { CommonModule } from '@angular/common'; 進入我的子模塊並import { BrowserModule } from '@angular/platform-browser'; 進入我的app.modules.ts文件，但我仍然收到以下錯誤。

Can't bind to 'ngForOf' since it isn't a known property of 'tr'.

我曾嘗試查看其他問題，但所有剛剛提到的問題都include CommonModule ，我就是。

這些是我的文件：

crud-list.component.html

<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>Id</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor='let item of cruds'>
      <td>{{item.OrderNumber}}</td>
    </tr>
  </tbody>
</table>

crud-list.component.ts

import { Component, OnInit } from '@angular/core';
import { CrudRequestService } from '@modules/crud/crud-services/crud-request.service';

@Component({
  selector: 'app-crud-list',
  templateUrl: './crud-list.component.html',
  styleUrls: ['./crud-list.component.scss']
})
export class CrudListComponent {
  public cruds: Array<any>;

  constructor(private objService: CrudRequestService) {
    this.objService.get().subscribe(
      (oDataResult: any) => { this.cruds = oDataResult.value; },
      error => console.error(error)
    );
  }
}

crud.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

import { CrudListComponent } from '@modules/crud/crud-list/crud-list.component';
import { CrudFormComponent } from '@modules/crud/crud-form/crud-form.component';
import { CrudComponent } from '@modules/crud/crud.component';

const routes: Routes = [
  {
    path: '', component: CrudComponent, children: [
      { path: '', component: CrudListComponent },
      { path: 'create', component: CrudFormComponent },
      { path: 'edit/:id', component: CrudFormComponent }
    ]
  },
];

@NgModule({
  imports: [CommonModule, RouterModule.forChild(routes)],
  declarations: [CrudComponent]
})

export class CrudModule { }

app.module.ts

/* all the imports */

@NgModule({
  declarations: [
    AppComponent,
    ForbidenAccessComponent,
    PageNotFoundComponent,
    AppHeaderComponent,
    AppFooterComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    NgbModule,
    AppRoutingModule,
    CoreModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: JwtInterceptor,
      multi: true,
    },
    BreadcrumbsService,
    AccordionService,
    ModalService,
    RequestService,
    IdentityProviderService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

應用程序路由.module.ts

/* imports */

const routes: Routes = [
  { path: 'home', canActivate: [AuthGuard], component: HomeComponent },
  { path: 'crud', canActivate: [AuthGuard], loadChildren: () => import('@modules/crud/crud.module').then(m => m.CrudModule)},
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  // The error status pages
  { path: '403', component: ForbidenAccessComponent },
  { path: '404', component: PageNotFoundComponent },
  { path: '**', redirectTo: '/404' }
];

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

Answer 1

當我在 stackblitz 中重新創建您的問題時，我沒有問題。

https://stackblitz.com/edit/angular-60533597

確保將組件添加到模塊declarations以及Routes 。

Answer 2

crud.module.ts

//crud module should export crud component
@NgModule({
  imports: [CommonModule, RouterModule.forChild(routes)],
  declarations: [CrudComponent],
  exports: [CrudComponent]
})

export class CrudModule { }

您可能還沒有在AppModule的imports數組中添加CommonModule 。

希望這能解決您的問題！

Answer 3

發現問題了。 雖然應用程序是比規定的一個沒有其他問題上運行，當我去復制上StackBlitz問題，代碼有給了我一個錯誤，告訴我，我需要添加CrudListComponent我@NgModule聲明，所以我所有必須做的是在那里添加組件，重建應用程序並且它工作。

crud.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

import { CrudListComponent } from '@modules/crud/crud-list/crud-list.component';
import { CrudFormComponent } from '@modules/crud/crud-form/crud-form.component';
import { CrudComponent } from '@modules/crud/crud.component';

const routes: Routes = [
  {
    path: '', component: CrudComponent, children: [
      { path: '', component: CrudListComponent },
      { path: 'create', component: CrudFormComponent },
      { path: 'edit/:id', component: CrudFormComponent }
    ]
  },
];

@NgModule({
  declarations: [CrudComponent, CrudListComponent, CrudFormComponent],
  imports: [CommonModule, RouterModule.forChild(routes)]
})

export class CrudModule { }

Answer 4

這個問題存在於 angular 9 中。我使用的是angular(9.0.1)版本，所以升級到~10.0.9現在它可以工作了。

Answer 5

我在使用Ionic 5和Angular 9 時遇到了同樣的問題，並搜索了幾個小時的解決方案。 基本上我確定了3 個主要原因。

1. 清理並重建（或重新安裝）您的項目。 Ionic 5 示例： cordova clean; ionic cordova build android cordova clean; ionic cordova build android (or rm -rf node_modules; npm install ) 在項目的目錄中。

2.通常這是一個問題， CommonModule未包含在您的組件模塊中（或BrowserModule未包含在您的應用程序模塊中）。 離子 5 示例：

list.module.ts

import { CommonModule } from '@angular/common';
import { ListPage } from './list';
...

@NgModule({
  imports: [
    CommonModule,
    ...
  ],
  declarations: [ListPage]
})
export class ListModule {}

app.module.ts

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

@NgModule({
  exports: [
    FormsModule,
    ReactiveFormsModule
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ...
  ],
  declarations: [AppComponent],
  providers: [
    StatusBar,
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

3.根據您運行的 Angular 版本，如果它運行 Ivy，（如果您當前使用的是 Ionic 5，則可能不會），那么您將需要在父模塊的entryComponents以及聲明中擁有ModalComponent . 在以下示例中，CalendarModule 將 ListComponent 顯示為模態。 離子 5 示例：

日歷.module.ts

import { CommonModule } from '@angular/common';
...
import { CalendarPage } from './calendar';
import { ListPage } from "../../modals/list/list";

@NgModule({
  imports: [
    CommonModule,
    ...
  ],
  declarations: [CalendarPage, ListPage],
  entryComponents: [ListPage],
  providers: []
})
export class CalendarModule {}

PS：要取消和激活Ivy在 TypeScript 配置中設置 Angular 編譯器選項

配置文件

"angularCompilerOptions": {
    ...
    "enableIvy": false
 },
 

Answer 6

你 app.module 的導入中的 NgbModule 是什么？ 因為我知道@NgModule 但這不需要在導入中：[...] 但只在頂部導入。

還有一些建議：在 crud-list.component.ts 中，您需要取消訂閱您的訂閱，並且構造函數僅用於注入，請使用 ngOnInit ;)

export class CrudListComponent implements OnInit, OnDestroy {
 cruds: Array<any>
 dataSubscription: Subscription

 constructor(private objService: CrudRequestService) { }
 ngOnInit() {
  this.dataSubscription = 
  this.objService.get().subscribe(data => {
   this.cruds = data.value
  })
 }
  ngOnDestroy() {
    this.dataSubscription.unsubscribe()
  }
}

Answer 7

我最近遇到了類似的問題。 您需要在 CrudModule 的聲明部分下添加 CrudListComponent 。 請檢查這是否可以為您解決問題。