core.js:4002 错误类型错误：无法读取未定义的属性 ***

Question

我需要一个关于我哪里做错的建议......

我有一个小的 Angular 应用程序，一切正常，但在浏览器控制台中，我可以看到如下错误消息：

core.js:4002 ERROR TypeError: Cannot read property 'IS_DATABASE_ACCESSIBLE' of undefined
    at Object.eval [as updateDirectives] (DashboardDefaultComponent.ngfactory.js:76)
    at Object.updateDirectives (core.js:29785)
    at checkAndUpdateView (core.js:29438)
    at callViewAction (core.js:29679)
    at execComponentViewsAction (core.js:29621)
    at checkAndUpdateView (core.js:29444)
    at callViewAction (core.js:29679)
    at execEmbeddedViewsAction (core.js:29642)
    at checkAndUpdateView (core.js:29439)
    at callViewAction (core.js:29679)

我想摆脱它们，但不知道如何。

default.component.ts [编辑版本]

import { Component, OnInit } from '@angular/core';
import { OracleDatabaseService } from '../../services/oracle-database.service';

// ***************
// ** Classes
// ***************
import { clsDatabase } from '../../classes/clsDatabase.js';


@Component({
  selector: 'app-default',
  templateUrl: './default.component.html',
  styleUrls: ['./default.component.css']
})


export class DefaultComponent implements OnInit {

  database_availability        : clsDatabase;

  constructor(
    private oradb : OracleDatabaseService,
  ) { }

  ngOnInit() {
    this.Get_Database_Accessibility();
  }

  Get_Database_Accessibility(): void {

    // Get database status before autorefresh
    this.oradb.Query_Database_Accessibility().subscribe(database_availability => this.database_availability = database_availability);

  }

}

clsDatabase.js

export class clsDatabase = {
IS_DATABASE_ACCESSIBLE : string
}

default.component.html [编辑版本]

<!--
  *************************************************************************
  ** Template
  *************************************************************************
-->

<ng-template #EnterpriseManagerDatabaseAvailability let-databaseaccessible="databaseaccessible">

  <div *ngIf="databaseaccessible === 'Yes'; then dbisup else dbisdown">This is ignored</div>

    <ng-template #dbisup>
      <app-summary-v1></app-summary-v1>
    </ng-template>

    <ng-template #dbisdown>
      <app-oem-inaccessible></app-oem-inaccessible>
    </ng-template>

</ng-template>


<!--
  *************************************************************************
  ** Rendering
  *************************************************************************
-->

<ng-container *ngTemplateOutlet="EnterpriseManagerDatabaseAvailability;context:{databaseaccessible:database_availability.IS_DATABASE_ACCESSIBLE"></ng-container>

oracle-database.service [代码摘录]

// ****************************
// ** Classes
// ****************************
import { clsDatabase } from '../classes/clsDatabase';


  // *************************
  // ** Check the database accessibility
  // *************************

  Query_Database_Accessibility(): Observable<clsDatabase> {
    const url = this.rootUrl +'DatabaseAccessibility';
    return this.http.get<clsDatabase>(url);

Answer 1

您面临的问题是，您发出的请求是可观察的，这是一个异步任务。因此，在您收到响应之前，您的 html 会加载具有未定义的 database_availability，直到您收到响应。这就是错误的原因。你可以做的是，首先你检查database_availability的可用性

database_availability ? database_availability.IS_DATABASE_ACCESSIBLE : ""

或者使用*ngIf="database_availability " 然后你的代码