类型错误：无法读取未定义的 Angular

Question

我有一个从 Spring Boot 项目中获取参数的 Angular 项目。在后面我有一个包含信息的 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>