Angular 11 错误：无法绑定到“ngForOf”，因为它不是“tr”的已知属性答案

【问题标题】：Angular 11 error : Can't bind to 'ngForOf' since it isn't a known property of 'tr'Angular 11 错误：无法绑定到“ngForOf”，因为它不是“tr”的已知属性
【发布时间】：2021-04-02 00:13:42
【问题描述】：

我有相同的页面，但我不知道为什么这个页面不起作用。看起来错误发生在数组被填充之前。为什么？在我的另一个页面上，它是相同的服务并且可以正常工作。感谢您的帮助。

HTML

<thead>
  <tr>
    <th>#</th>
    <th>UserID</th>
    <th></th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let printShopPortalUser of printShopPortalUsers; let i = index">
    <th scope="row">{{ i + 1 }}</th>
    <td>{{ printShopPortalUser.userID }}</td>
  
  </tr>
</tbody>

角度

@NgModule({
    imports: [
      BrowserModule,
      ReactiveFormsModule,
      NgbModule
        
    ],
    declarations: [
    ]
})

printShopPortalUsers: UserPrintShop[] = [];

ngOnInit() {
//The first method is returning an empty array ! while it works on another page
    //this.printShopPortalUserService.findAll().pipe(first()).subscribe(printShopPortalUsers => this.printShopPortalUsers = printShopPortalUsers);

//This second method returns an array but the tr error happens before
    this.printShopPortalUserService.findAll().pipe(first()).subscribe((res:UserPrintShop[])=>{
      this.printShopPortalUsers = res;
      console.log(res);
    })
    console.log(this.printShopPortalUsers);


}

【问题讨论】：

请尝试在您的根模块中导入 BrowserModule，将 CommonModule 添加到子模块中。
你好Kevi Zhang，是的，浏览器模块在根模块中，我只导入了公共模块，但它是同样的错误。
您的项目中有多少个模块，只有一个？尝试运行此命令ng build --prod 你会得到什么
我得到了我在开发 src/app/services/UserPrintShopService.ts:18:33 中没有得到的错误 - 错误 TS2339：属性 'api' 不存在于类型 '{ production: boolean ; }'。 18个超级（_http，${environment.api.baseUrl}usersprintshop）；我得到了在开发模式下运行正常的其他页面和服务。
malbarmavi，我会在 2 小时内完成并把链接放在这里。

标签： html angular typescript ngfor angular11

【解决方案1】：

你需要导入CommonModule

@NgModule({
    imports: [
      BrowserModule,
      ReactiveFormsModule,
      NgbModule,
      CommonModule  
    ],
    declarations: [
    ]
}

【讨论】：

也试过这个，但仍然得到同样的错误。感谢您的帮助。
你在使用惰性模块吗？
我不知道。如何验证这一点？我添加了图片
我建议您仔细检查您是否在声明组件的模块中导入 CommonModule。这确实是标准问题。
Christoph，是的，它是在声明组件的地方导入的。

【解决方案2】：

在 html 中为 printShopPortalUsers 添加一个真实的验证

<tbody *ngIf="printShopPortalUsers">
          <tr *ngFor="let printShopPortalUser of printShopPortalUsers; let i = index">
               <th scope="row">{{ i + 1 }}</th>
               <td>{{ printShopPortalUser.userID }}</td>
          </tr>
</tbody>

【讨论】：

【解决方案3】：

我终于找到了问题所在。我正在使用一个名为“Paper Dashboard”的角度模板

它有一个名为“admin-layout.module.ts”的文件

这是导入通用模块的模块。

我只需要在这里导入我的组件并在这里声明它，它就可以工作了

import { PrintShopPortalUserComponent } from '../../pages/printShopPortalUsers/printShopPortalUserComponent'; 

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(AdminLayoutRoutes),
    FormsModule,
    NgbModule
  ],
  declarations: [
   ..
    PrintShopPortalUserComponent,
  ..
  ]
})

【讨论】：