Angular 9-服务返回/列表包含数据，但*ngFor未显示任何内容

这是我的代码示例，我正在尝试此操作，并从API端得到响应，但无法通过*ngFor显示。在category-list.component.ts的ngOnInit中，我调用了服务并获得了数据。还有一件事是我在这里使用容器

    //category.service.ts
    getAll(): Observable<Response> {
        return this.httpClient
            .get<Response>(this.apiUrl + '/category/' + 1 + '/' + 10)
            .pipe(catchError(this.errorHandler));
    }

    //category-list.component.ts
    export class CategoryListComponent implements OnInit {
        @Input() pageSize = 4;
        categories: Category[] = [];
        constructor(
            public categoryService: CategoryService,
            private changeDetectorRef: ChangeDetectorRef
        ) {}

        ngOnInit() {
            this.categoryService.getAll().subscribe((data:Response) => {

                this.categories = data.data; 
                console.log(this.categories);
            });
        }
    } 
    //category-list.component.html
    <p>Category List</p>
    <ul>
      <li *ngFor="let data of categories">{{data.id}}</li>
    </ul>
//category.component.html
<div class="card-body">
    <app-category-list></app-category-list>
</div>  
//data

//category.service.ts
getAll（）：可观察{
返回此.httpClient
.get（this.apirl+'/category/'+1+'/'+10）
.pipe（catchError（this.errorHandler））；
}
//category-list.component.ts
导出类CategoryListComponent实现OnInit{
@Input（）pageSize=4；
类别：类别[]=[]；
建造师(
公共类别服务：类别服务，
私有changeDetectorRef:changeDetectorRef
) {}
恩戈尼尼特（）{
this.categoryService.getAll（）.subscribe（（数据：响应）=>{
this.categories=data.data；
console.log（this.categories）；
});
}
} 
//category-list.component.html
类别列表


{{data.id}

//category.component.html
以美元角符号（$）表示可观察到的标记。当你做这个作业的时候

this.categories$ = data.data; // jsonObj as Category[];

您分配的是可观察的结果，而不是可观察的本身。所以在这种情况下，要么在HTML中删除异步管道，并重命名categories$->categories，这样就不会产生误导，再加上将类型更改为Category[]或在组件中指定categories$，如下所示

this.categories$ = this.categoryService.getAll();

以角美元符号（$）表示可观察到的标记。当你做这个作业的时候

this.categories$ = data.data; // jsonObj as Category[];

您分配的是可观察的结果，而不是可观察的本身。所以在这种情况下，要么在HTML中删除异步管道，并重命名categories$->categories，这样就不会产生误导，再加上将类型更改为Category[]或在组件中指定categories$，如下所示

this.categories$ = this.categoryService.getAll();

尝试在html中输出该变量，看看首先得到的是什么

您的代码逻辑总体上看起来是正确的，除了关于可观察性的部分（我不是专家）。尝试进行这些更改

categories: Category[] = [];


this.categoryService.getAll().subscribe((data) => {
            this.categories = data.data;
});


<ul>
  <li *ngFor="let data of categories">{{data.id}}</li>
</ul>

类别：类别[]=[]；
this.categoryService.getAll（）.subscribe（（数据）=>{
this.categories=data.data；
});

{{data.id}

尝试在html中仅输出该变量，然后查看首先得到的内容

您的代码逻辑总体上看起来是正确的，除了关于可观察性的部分（我不是专家）。尝试进行这些更改

categories: Category[] = [];


this.categoryService.getAll().subscribe((data) => {
            this.categories = data.data;
});


<ul>
  <li *ngFor="let data of categories">{{data.id}}</li>
</ul>

类别：类别[]=[]；
this.categoryService.getAll（）.subscribe（（数据）=>{
this.categories=data.data；
});

{{data.id}

这是一个工作演示，它从API获取数据，将结果分配给类上的属性，并在模板中使用
*ngFor
显示结果

如果您的代码仍然不能正常工作，请提供一个可复制的演示，让我们进一步了解我的演示

值得一提的是，您应该从“@angular/platform browser”导入{BrowserModule}”导入的
AppModule
数组中的code>可能已经存在。
下面是一个工作演示，它从API获取数据，将结果分配给类上的属性，并在模板中使用
*ngFor
显示结果

如果您的代码仍然不能正常工作，请提供一个可复制的演示，让我们进一步了解我的演示

值得一提的是，您应该从“@angular/platform browser”导入{BrowserModule}”包含在
AppModule
的
imports
数组中，您可能已经有了该数组。
尝试了此操作，但没有成功。你能再解释一下吗？有什么问题吗？我看到您在代码中声明了类别$！-用那个‘！’签名这可能是问题所在吗？如果没有，请在StackBlitz后尝试，但不起作用。你能再解释一下吗？有什么问题吗？我看到您在代码中声明了类别$！-用那个‘！’签名这可能是问题所在吗？如果没有，请张贴stackblitz你能提供stackblitz演示吗？或者试试你的其他代码，你能提供stackblitz演示吗？或者尝试您的其他代码