表中未显示角度api响应数据

Question

我对angular很陌生，所以遵循Deborah Kurata的angular入门和反应形式课程。在课程代码中，有一个产品列表组件，它在模板中有一个表，在模型中调用一个产品服务来检索ngOnInit中的一些数据。

我将此作为我自己的应用程序的示例，在该应用程序中，我从后端获取类别，并以相同的方式在表中显示它们。

问题是，虽然示例代码可以工作并将数据加载到表中，但我的代码没有在表中显示任何数据。

getCategories方法成功地从后端获取了5个项目。为什么这对模板不可见？

模板代码

<div class='table-responsive'>
<table class='table mb-0'
*ngIf='categories && categories.length'>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
<th>Notes</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let category of filteredCategories">
<td>
<a [routerLink]="['/category-list', category.id]">
{{ category.id }}
</a>
</td>
<td>{{ category.name }}</td>
<td>{{ category.description }}</td>
<td>{{ category.notes }}</td>
<td>
<button class="btn btn-outline-primary btn-sm"
[routerLink]="['/categories', category.id, 'edit']">
Edit
</button>
</td>
</tr>
</tbody>
</table>
</div>

型号代码

export class CategoryListComponent implements OnInit {
pageTitle = 'Categories';
errorMessage = '';

sub!: Subscription;

filteredCategories: Category[] = [];
categories: Category[] = [];

_listFilter = '';
get listFilter(): string {
return this._listFilter;
}
set listFilter(value: string) {
this._listFilter = value;
this.filteredCategories = this.listFilter ? this.performFilter(this.listFilter) : this.categories;
}

constructor(private categoryService: CategoryService) { }

performFilter(filterBy: string): Category[] {
filterBy = filterBy.toLocaleLowerCase();
return this.categories.filter((category: Category) => 
category.name.toLocaleLowerCase().indexOf(filterBy) !== -1);
}

ngOnInit(): void {
this.sub = this.categoryService.getCategories().subscribe({
next: c => {
this.categories = c;
this.filteredCategories = this.categories;
},
error: err => this.errorMessage = err
});
}
}

服务代码

getCategories(): Observable<Category[]> {
return this.httpClient.get<Category[]>(this.categoriesBaseUrl + "/GetAll")
.pipe(
tap(data => console.log(JSON.stringify(data))),
catchError(this.handleError)
)
}

编辑：另一个区别是，当我使用实际的api时，课程使用了"内存中的角度web api"。当使用模型中的断点进行调试时，ngOnInit类别可以在填充了数据的观察列表中看到，但当它进入观察列表中ngIf"categories"的模板断点时，为"undefined">

Answer 1

问题是api将对象中的categories数组作为属性返回，而这不能直接分配给Category[]类型的变量。更改了api以直接返回类别数组，而不返回包装器对象，数据现在显示在表中。