Ошибка типа: не удается прочитать свойство 'commit' неопределенного Angular

#javascript #angular #angular11

Вопрос:

У меня есть проект Angular, который выбирает параметры из проекта Spring Boot. Сзади у меня есть DTO, который содержит информацию, а спереди я получаю доступ к этой информации, чтобы отобразить ее на экране. Когда я показываю диалоговое окно с информацией, оно показывает ошибку в консоли TypeError: Cannot read property 'commit' of undefined , но работает нормально.

Это ошибка:

Это about.component.html :

 <header class="title-color" fxFlex>Build Info</header>
<mat-divider></mat-divider>
<span class="header-item">Front (Angular): </span>
<div fxFlexLayout="column" class="about-data">
    <div>Commit: {{data.front.commit}}</div>
    <div>Fecha: {{data.front.date}}</div>
    <div>Versión: {{data.front.version}}</div>
</div>
<mat-divider></mat-divider>
<span class="header-item">Back (Java): </span>
<div fxFlexLayout="column" class="about-data">
    <div>Commit: {{data.people.commit}}</div>
    <div>Fecha: {{data.people.date}}</div>
    <div>Versión: {{data.people.version}}</div>
</div>

Это и есть тот самый about.component.ts :

 ngOnInit() {

    this.http.get('/assets/build_info.txt', { responseType: 'text' }).subscribe((data: String) => {

      let re: RegExp = new RegExp("^(Author|Date|commit|Version).*", "i");
      let frontInfo: InfoDTO = data.split('n').filter(l => re.test(l)).reduce((accum, line) => {
        line = line.replace(":", " ");
        let sepIndex = line.indexOf(' ');
        let attr = line.substring(0, sepIndex).toLowerCase();
        let value = line.substring(sepIndex).trim();
        accum[attr] = value;
        return accum;
      }, new InfoDTO());

      const ob1 = this.aboutService.aboutInfo();

      ob1.subscribe((people: InfoDTO) => {
        this.data = {
          front: frontInfo,
          people: InfoDTO
        };
      });
    });
  }

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

1. Выборка данных является асинхронной и занимает некоторое время, прежде чем она будет завершена, angular попытается отобразить шаблон, когда data.front он не определен. Добавьте a ngIf в свой html-блок, только если data он доступен

2. Вы можете привести пример?, я не знаю, как поставить ngIf это div

Ответ №1:

Вы пытаетесь отобразить данные, которые еще не извлечены. выборка (и, следовательно, подписка) является асинхронной, поэтому ваше представление отображается до того, как данные будут доступны.

Для этого существует несколько решений, вы можете, например, добавить условие в свой вид, например :

 <div *ngIf="data?.front"> 
  ... display your data here 
</div>

И то же самое для data.people . В зависимости от того, как вы инициализируете data , вы можете даже обернуть весь свой код в *ngIf="data" condition.

Итак, с вашим кодом это будет выглядеть так :

 <header class="title-color" fxFlex>Build Info</header>
<mat-divider></mat-divider>
<span class="header-item">Front (Angular): </span>
<div *ngIf="data?.front" fxFlexLayout="column" class="about-data">
    <div>Commit: {{data.front.commit}}</div>
    <div>Fecha: {{data.front.date}}</div>
    <div>Versión: {{data.front.version}}</div>
</div>
<mat-divider></mat-divider>
<span class="header-item">Back (Java): </span>
<div *ngIf="data?.people" fxFlexLayout="column" class="about-data">
    <div>Commit: {{data.people.commit}}</div>
    <div>Fecha: {{data.people.date}}</div>
    <div>Versión: {{data.people.version}}</div>
</div>