HTML不显示来自API的数据，而是显示在控制台的.ts文件中

Question

我成功地从我的API获取数据，我可以在控制台日志中看到它。以下是该数据的副本:

[
{
"id": "10950",
"name": "Name One",
"adress": "Some street 3",
"location": "City 2"
},
{
"id": "10951",
"name": "Name Two",
"adress": "Some street 2",
"location": "City 3"
}
]

听我说:当我想在HTML中显示这些数据时，它没有显示出来。然后我点击到同一个应用程序中的另一个页面(另一个路由)，然后回到这个路由，所有的东西都显示在HTML中。我很困惑，所以我做了一个按钮(click)="onInit()"当我点击它时，它会显示所有内容。但是这当然不是很好，我想立即显示数据。

不知道这是否有帮助，但我发现它在html中显示数据，即使我刚刚打开DevTools。当我关闭时，HTML数据仍然显示。换句话说，除了在页面加载时我希望它是右的时候，所有的东西都显示出来。

这里有一些片段，我认为可以帮助:

//this is a class that gets data in loadData()
export class PocetnaStranicaComponent implements OnInit, OnDestroy {
router: Router;
sub!: Subscription;
poslovnice: PoslovnicaModel[] = [];
constructor(private productService: APIService,
private route: ActivatedRoute) {
}
ngOnInit() {
this.loadData();
}
ngOnDestroy(): void {
this.sub.unsubscribe();
}
loadData(){
this.sub = this.productService.getPoslovniceListSve().subscribe(response=>{
this.poslovnice = response;
console.log(this.poslovnice);
});
}
}

这是引起问题的HTML部分:

<div>
<h1 class="poslovnica-title">POSLOVNICE</h1>
<!--<button (click)="ngOnInit()">Prikaži</button>-->
</div>
<div class="poslovnica-box" *ngFor="let poslovnica of poslovnice" routerLink="poslovnica/{{poslovnica.id}}">
<p class="poslovnica-text">POSLOVNICA</p>
<h1 class="poslovnica-ime-text">{{poslovnica.name}}</h1>
</div>

在API服务:

getPoslovniceListSve(): Observable<PoslovnicaModel[]> {
let myUrl: string = API_URL + '/poslovnica/list';

return this.http.get<PoslovnicaModel[]>(myUrl, this.httpUtils.getHTTPHeader());
}

我尝试了数以百万计的答案-从异步管道到'?操作符，*ngIf="等等，但没有结果。我不明白为什么会发生这种情况，感谢您提供的每一个帮助。

Answer 1

虽然我很想找出这个问题的根源(可能是变更检测策略设置)，但我想推荐以下策略。你说你试图使用async管道，但我想提供一个完整的例子。此外，它还显示了您可以减少多少样板文件。

TS组件

export class PocetnaStranicaComponent {
poslovnice$: Observable<PoslovnicaModel[]>;
constructor(
private productService: APIService,
// Not sure why you need these next two items, but I added them anyway
private route: ActivatedRoute,
private router: Router
) {
this.poslovnice$ = this.productService.getPoslovniceListSve();
}
}

HTML

组件

<div>
<h1 class="poslovnica-title">POSLOVNICE</h1>
</div>
<div class="poslovnica-box" *ngFor="let poslovnica of poslovnice$ | async" routerLink="poslovnica/{{poslovnica.id}}">
<p class="poslovnica-text">POSLOVNICA</p>
<h1 class="poslovnica-ime-text">{{poslovnica.name}}</h1>
</div>

Answer 2

我同意@Joshua McCarthy的观点，我更喜欢他的解决方案。但对你来说，当你的组件装饰器中有changeDetection: ChangeDetectionStrategy.OnPush时，angular只会在@Input()发生变化或@Output()事件引发时更新你的模板。当你有一个http调用时，你可以在subscribe中手动调用markForCheck来检测更改。

//this is a class that gets data in loadData()
export class PocetnaStranicaComponent implements OnInit, OnDestroy {
router: Router;
sub!: Subscription;
poslovnice: PoslovnicaModel[] = [];
constructor(
private productService: APIService,
private route: ActivatedRoute,
private cdRef: ChangeDetectorRef
) {}
ngOnInit() {
this.loadData();
}
ngOnDestroy(): void {
this.sub.unsubscribe();
}
loadData(){
this.sub = this.productService.getPoslovniceListSve().subscribe(response=>{
this.poslovnice = response;
this.cdRef.markForCheck();
});
}
}