我有如下服務：
public getDoseVignettes() : Observable<DoseVignetteApi> {
return this.apollo.watchQuery<Query>({
query: this.VIGNETTE
}).valueChanges
.pipe(
map(result => {
return result.data.doseVignettes;
}
));
}
它按預期回傳資料。
該服務呼叫如下：
doseVignetteApi! : DoseVignetteApi;
public ngOnInit(): void {
this.dataService.getDoseVignettes().subscribe(doseVignetteApi => {
// console.log("VIGNETTE : " JSON.stringify(doseVignetteApi)); [1]
this.doseVignetteApi = doseVignetteApi;
})
}
[ console.log1] 將顯示這些資料。
前面的代碼是：
<div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="20px" class="stats-cards"
*ngFor="let vignette of this.doseVignetteApi!.vignettes!">
<mat-card class="example-card" fxFlex="20">
<mat-card-title>{{vignette!.aliasDose!}}</mat-card-title>
<mat-card-content>
<div *ngFor="let item of vignette!.items!">
{{item.name}} : {{item!.total}}
</div>
</mat-card-content>
</mat-card>
</div>
資料將顯示在 Chrome 上，但此代碼出現以下問題：
在 Chrome 除錯器上，得到：Cannot read properties of undefined (reading 'vignettes')
因此，其他一些小部件沒有顯示 (???)
我應該從服務中回傳一個 Observable 并使用asyncin*ngFor="let vignette of this.doseVignetteApi!.vignettes!"還是有辦法subscribe像上面的代碼一樣使用？
編輯：解決方案 1
@MikeOne 的建議有效：HTML 模板中的感嘆號應該已經被問號替換了。
編輯：解決方案 2
按照@ZrelliMajdi 的建議，得到它的作業如下：
<ng-container
*ngIf="doseVignetteApi | async as dataServiceDetails">
<div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="20px" class="stats-cards"
*ngFor="let vignette of this.dataServiceDetails!.vignettes ">
<mat-card class="example-card" fxFlex="20">
<mat-card-title>{{vignette!.aliasDose!}}</mat-card-title>
<mat-card-content>
<div *ngFor="let item of vignette!.items!">
{{item.aliasVaccine}} : {{item!.totalByAlias}}
</div>
</mat-card-content>
</mat-card>
</div>
</ng-container>
public ngOnInit(): void {
this.doseVignetteApi = this.dataService.getDoseVignettes();
}
uj5u.com熱心網友回復：
您可以在 html 模板上訂閱您的 observable，然后使用其資料：
<ng-container
*ngIf="dataService | async as dataServiceDetails">
<div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="20px"
*ngFor="let vignette of dataServiceDetails">
<mat-card fxFlex="20">
<mat-card-title>{{vignette!.aliasDose!}}</mat-card-title>
<mat-card-content>
<div *ngFor="let item of vignette!.items!">
{{item.name}} : {{item!.total}}
</div>
</mat-card-content>
</mat-card>
</div>
</ng-container>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/476927.html
上一篇：如何使用位置居中塊？