无法绑定到 'ngForOf'，因为它不是 Angular 中 'tr' 的已知属性 9

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 { }

应用-routing.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

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 2

你导入的NgbModule是什么app.module？因为我知道@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 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

当我在 stackblitz 中重现你的问题时，我没有遇到任何问题。

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

确保将组件添加到模块 declarations 以及 Routes。

Answer 5

此问题存在于 angular 9。我使用的是 angular(9.0.1) 版本，因此升级到 ~10.0.9 现在可以正常使用了。

Answer 6

我遇到了与 Ionic 5 & Angular 9 相同的问题，并搜索了几个小时的解决方案。基本上我确定了 3 个主要原因。

1.清理并重建（或重新安装）您的项目。 Ionic 5 示例：项目目录中的 cordova clean; ionic cordova build android（或 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）那么您将需要在 父模块 [=51= 的 entryComponents 中包含 ModalComponent ] 以及声明。在以下示例中，CalendarModule 将 ListComponent 显示为模态。离子 5 示例：

calendar.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 {}

P.S.: 取消和激活 Ivy 在
中的 TypeScript 配置中设置 Angular 编译器选项
tsconfig.json

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

无法绑定到 'ngForOf'，因为它不是 Angular 中 'tr' 的已知属性 9

Can't bind to 'ngForOf' since it isn't a known property of 'tr' in Angular 9

angular

typescript

angular9

无法绑定到 'ngForOf'，因为它不是 Angular 中 'tr' 的已知 属性 9

Can't bind to 'ngForOf' since it isn't a known property of 'tr' in Angular 9

angular

typescript

angular9

无法绑定到 'ngForOf'，因为它不是 Angular 中 'tr' 的已知属性 9