Использование Angular Observable: невозможно прочитать свойства undefined (чтение «foo»)

У меня есть служба следующим образом:

  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.log [1] будет отображать эти данные.

Передний код:

<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 из службы и использовать async в *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();
}