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

如何解决Angular 11 错误：无法绑定到“ngForOf”，因为它不是“tr”的已知属性 HTML角度

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

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);


}

解决方法

您需要导入CommonModule

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

,

在 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>

,

终于知道问题出在哪里了。 我正在使用一个名为“Paper Dashboard”的角度模板

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

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

我只需要在此处导入我的组件并在此处声明它就可以了

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

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