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

您面臨的問題是，您提出的請求是 Observable，這是一個異步任務。 因此，在您收到響應之前，您的 html 會加載具有未定義的database_availability直到您收到響應。 這就是錯誤的原因。 您可以做的是，首先檢查database_availability的可用性，例如

database_availability ? database_availability.IS_DATABASE_ACCESSIBLE : ""

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