Не удается прочитать свойство 'content' из неопределенного Angular

Question

Я выполняю обычный запрос http get в своем компоненте и показываю результаты в html, все работает, но когда я открываю консоль, я получаю ошибку. 'Не удается прочитать свойство' content 'из неопределенного.

<div class="container myPadding">
<div class="form-row justify-content-center">
    <h1>Substances</h1>
</div>

<div class="form-row justify-content-center">
    <p class="alert alert-info">
        Total Substances registered: ({{ substanceList.totalElements }})
    </p>
</div>
<a>
    <table class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Substance Name</th>
            </tr>
        </thead>
        <tbody *ngFor="let response of substanceList.content | slice:0:99">
            <tr>
                <td>{{response.neo4jId}}</td>
                <td>{{response.substanceName}}</td>
            </tr>
        </tbody>
    </table>
</a>

и файла ts

export class SubstancesComponent implements OnInit, OnDestroy {
substanceList: any;
subscription: Subscription;

constructor(private http: HttpClient, private drugService: DrugsService) { }

ngOnInit() {
  this.getAllSubstances();
}

getAllSubstances() {
 this.subscription = this.drugService.getSubstances().subscribe(response => {
  this.substanceList = response;
  console.log(this.substanceList);
})
}

ngOnDestroy() {
 this.subscription.unsubscribe();
 }

}

, и это функция в моем сервисе

    getSubstances(): any {
    return this.http.get(environment.substancesUrl);
}

Я хочу получить результат в браузере, но эта ошибка появляется в консоли, я хотел бы понять, почему эта ошибка возникает и как я могу ее решить.

Answer 1

Вы хотите добавить ? s перед всеми свойствами вашего объекта, например, {{ substanceList?.totalElements }}, что предотвращает проблемы, связанные с попыткой найти ключ totalElements для объекта, который все еще возвращается запросом get.

Вы также, вероятно, захотите добавить асинхронный канал c к любым переменным, которые заполняются в результате асинхронного вызова, чтобы гарантировать, что данные отображаются на экране только после того, как они становятся доступны (и не кратко например, undefined), например {{ substanceList?.totalElements | async }}

Answer 2

Вы не можете напрямую получить доступ к элементам объекта на странице HTML.

Пожалуйста, внесите следующие изменения:

  <tbody *ngFor="let response of substanceList && substanceList.content | slice:0:99">

ИЛИ

  <tbody *ngFor="let response of substanceList?.content | slice:0:99">