類型錯誤：無法讀取未定義 Angular 的屬性“提交”

Question

我有一個 Angular 項目，它從 Spring 引導項目中獲取參數。 在后面我有一個包含信息的 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
        };
      });
    });
  }

我找不到問題可能是什么，因為數據沒問題，我不知道是什么導致了這個錯誤。

Answer 1

您正在嘗試顯示尚未獲取的數據。 獲取（以及訂閱）是異步的，因此您的視圖會在數據可用之前顯示。

對此有多種解決方案，例如，您可以在視圖中添加一個條件，例如：

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

對於data.people 。 根據您初始化data的方式，您甚至可以將整個代碼包裝在*ngIf="data"條件中。

因此，使用您的代碼，它看起來像：

<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>