问题描述
我有相同的页面,可以正常工作,但我不知道为什么这个页面不起作用。看起来错误发生在数组被填充之前。为什么?在我的另一个页面上,它是相同的服务并且可以正常工作。感谢您的帮助。
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,..
]
})