Использование 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();
}

Восклицательные знаки в вашем шаблоне должны быть вопросительными.

MikeOne 17.05.2022 18:27

Ты абсолютно прав. Благодарю вас ! Оно работает

Hey StackExchange 17.05.2022 18:32
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Обработка ошибок при выполнении HTTP-запросов в JavaScript.
Обработка ошибок при выполнении HTTP-запросов в JavaScript.
Каждый проект должен выполнять HTTP-запросы, и, конечно, некоторые из этих запросов могут содержать ошибки. Нам нужно знать, как обрабатывать эти...
Включение UTF-8 в jsPDF с помощью Angular
Включение UTF-8 в jsPDF с помощью Angular
Привет, разработчики, я предполагаю, что вы уже знаете, как экспортировать pdf через jsPDF. Если ответ отрицательный, то вы можете ознакомиться с моей...
1
2
18
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете подписаться на свой наблюдаемый шаблон html, а затем использовать его данные:

<ng-container 
*ngIf="dataService | async as dataServiceDetails">
<div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="20px" class="stats-cards"
     *ngFor="let vignette of dataServiceDetails">
  <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>
</ng-container>

Добро пожаловать ^^

Zrelli Majdi 17.05.2022 18:39

Другие вопросы по теме