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

Question

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

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


}

Answer 1

你需要导入CommonModule

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

Answer 2

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

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

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

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

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

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

Answer 3

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