Check in component is null in Angular

Question

I have a Angular 8 application. But I get this error: on a component. And it is a component in a component. And if a component is empty then the error will be shown if the component is not null then the error will not be shown

:4200/dossier-dossier-module-ngfactory.js:186 ERROR TypeError: Cannot read property 'length' of null
    at DossierCorrespondenceItemComponent.push../src/app/dossier/dossier-correspondence-item/dossier-correspondence-item.component.ts.DossierCorrespondenceItemComponent.ngOnInit (:4200/dossier-dossier-module-ngfactory.js:100)
    at checkAndUpdateDirectiveInline (vendor.js:37850)
    at checkAndUpdateNodeInline (vendor.js:46063)
    at checkAndUpdateNode (vendor.js:46025)
    at debugCheckAndUpdateNode (vendor.js:46659)
    at debugCheckDirectivesFn (vendor.js:46619)
    at Object.updateDirectives (:4200/dossier-dossier-module-ngfactory.js:189)
    at Object.debugUpdateDirectives [as updateDirectives] (vendor.js:46611)
    at checkAndUpdateView (vendor.js:46007)
    at callViewAction (vendor.js:46248)

on this component:

  <app-dossier-correspondence-item
    [item]="single"
    (goBack)="goBack($event)"
    *ngIf="showingSingle">
  </app-dossier-correspondence-item>
</app-vital10-page>

this is the ts code:

import { Component, OnInit } from '@angular/core';
import { HealthAPIService } from '../../shared/health-api/health-api.service';

import { DossierEntry } from '../../interfaces/dossier/dossier-entry.interface';

@Component({
  selector: 'app-dossier-correspondence',
  templateUrl: './dossier-correspondence.component.html',
})

export class DossierCorrespondenceComponent implements OnInit {
  allCorrespondence: Array<DossierEntry>;
  correspondenceEntries: Array<DossierEntry>;
  attachmentEntries: Array<DossierEntry>;
  message = '';
  emptyMessage = 'Geen correspondentie.';
  errorMessage = 'Er ging iets mis met de connectie. Probeer over enkele minuten nogmaals.';

  correspondenceLoaded = false;
  showingSingle = false;

  single: DossierEntry;

  constructor(private healthAPIService: HealthAPIService) {}

  handleCorrespondenceLoad(result) {
    if (result.length === 0) {
      this.message = this.emptyMessage;
      return;
    }
    this.allCorrespondence = result;
    this.attachmentEntries = [];
    this.correspondenceEntries = [];
    for (let entry of result) {
      switch (entry.type) {
        case 'correspondence': {
          this.correspondenceEntries.push(entry);
          break;
        }
        case 'attachments': {
          this.attachmentEntries.push(entry);
          break;
        }
        default: {
          break;
        }
      }
    }
  }

  gotoItem(index, type: string) {
    this.showingSingle = true;
    // this.single = this.allCorrespondence[index];
    switch (type) {
      case 'correspondence': {
        this.single = this.correspondenceEntries[index];
        break;
      }
      case 'attachments': {
        this.single = this.attachmentEntries[index];
        break;
      }
      default: {
        break;
      }
    }
  }

  goBack(event) {
    this.showingSingle = false;
  }

  ngOnInit() {
    this.healthAPIService.getDossierEntry('correspondence').subscribe(result => {
     
      if(result){
      this.handleCorrespondenceLoad(result),
      (this.correspondenceLoaded = true);}
    }, msg => (this.message = this.errorMessage));
  }
}

So how to fix this? Thank you. So will be nice to solve this issue

This is the code of the DossierCorrespondenceItemComponent

ngOnInit() {

    if (!this.item.isJson) {
      if (window.btoa) {
        this.safeHTMLUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
          'data:text/html;base64,' + btoa(this.item.summary)
        );
      } else {
        this.safeHTMLUrl = this.sanitizer.bypassSecurityTrustResourceUrl('data:text/html;utf-8,' + this.item.summary);
      }
    }
  }

  openInNewTab() {
    const popup = window.open('', '_blank');
    popup.document.write(this.item.summary);
  }

You mean like this:

 handleCorrespondenceLoad(result) {



    if (result.length === 0) {
      this.message = this.emptyMessage;
      return;
    }

   
    this.allCorrespondence = result;
    this.attachmentEntries = [];
    this.correspondenceEntries = [];
    for (let entry of result) {
      switch (entry.type) {
        case 'correspondence': {
          this.correspondenceEntries.push(entry);
          break;
        }
        case 'attachments': {
          this.attachmentEntries.push(entry);
          break;
        }
        default: {
          break;
        }
      }
      this.showingSingle = true;
    }
  }

handleCorrespondenceLoad() should verify result is not null before starting to work with it. — Stavm
– Stavm, Commented Sep 12, 2019 at 13:37
Can you do a console.log and show us what are the contents of results? — Nicholas K
– Nicholas K, Commented Sep 12, 2019 at 13:42
Shouldn't there be a semicolon after this.handleCorrespondenceLoad(result)? — Vandesh
– Vandesh, Commented Sep 12, 2019 at 13:46

MoxxiManagarm · Accepted Answer · 2019-09-12 14:11:03Z

2

The element is enabled when you set showingSingle to true within gotoItem. But in the moment you enable it your singleis not yet set. Please set showingSingle to true AFTER your switchcase.

gotoItem(index, type: string) {

    // NOT HERE

    switch (type) {
      case 'correspondence': {
        this.single = this.correspondenceEntries[index];
        break;
      }
      case 'attachments': {
        this.single = this.attachmentEntries[index];
        break;
      }
      default: {
        break;
      }
    }

    this.showingSingle = true; // BUT HERE
  }

answered Sep 12, 2019 at 14:11

MoxxiManagarm

9,2214 gold badges20 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Check in component is null in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related