CODEWITHSUNDEEP
angular
Vic VKh
Vic VKh

Reputation: 311

core.js:4002 ERROR TypeError: Cannot read property *** of undefined

I need an advice about where I'm doing wrong ...

I have a small angular application and everything works fine but in the browser console, I can see the error messages like the following :

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)

I want to get rid of them but not sure how.

default.component.ts [Edited version]

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 [Edited version]

<!--
  *************************************************************************
  ** 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 [code excerpt]

// ****************************
// ** 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);

Upvotes: 0

Views: 6183

Answers (1)

varman
varman

Reputation: 8894

The problem you face is, The request you made is Observable which is an async task. So before you getting the response, your html loads which has database_availability that is undefined until you get the response. That's cause for the error. What you can do is, first you check availability of database_availability like

database_availability ? database_availability.IS_DATABASE_ACCESSIBLE : ""

or use *ngIf="database_availability " then your code

Upvotes: 2

Related Questions