Angular 7: TypeError: Cannot read properties of undefined (reading 'substr')-CodePudding

I have and angular 7.1.4 app that compiles successfully but when I open the console in my browser I see this error:

ERROR TypeError: Cannot read properties of undefined (reading 'substr')           core.js:14597 
at TruncatePipe.push../src/app/_services/truncate.ts.TruncatePipe.transform (truncate.ts:11:21)

If I understand this properly there is something wrong with the bellow code in my truncate.ts file. Here is my code:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 25, completeWords = false, ellipsis = '...') {
    if (completeWords) {
      limit = value.substr(0, limit).lastIndexOf(' ');
    }
    return `${value.substr(0, limit)}${ellipsis}`;
  }
}

I am not sure what is wrong here? Any thoughts what could be wrong?

CodePudding user response：

above all add one condition

if(value){
....your code
}

CodePudding user response：

Indraraj26 is pointing out that you should wrap your code in a check-value before executing.

If value is ever null, you cannot take a substring of it, so in order to avoid this scenario, you should check if value != null or "". You can do that simply in Angular by using

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 25, completeWords = false, ellipsis = '...') {
    if(value){
       if (completeWords) {
          limit = value.substr(0, limit).lastIndexOf(' ');
       }
       return `${value.substr(0, limit)}${ellipsis}`;
    }
  }
}

The if-statement will be false for null, and prevent your code from running and thus failing.

CodePudding user response：

Before using value you should check if its undefined look at the following example:

function:


public validateText(text: string) {
  return text;
}

Calling this function now will cause error:

const text = 'just an example' as string | undefined; 

validateText(text);

error:

TS2322: Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'.

In your case you should check value before calling the function or inside it before substr or be more specific like so:

if (typeof value === 'string') {
//Your code 
}

// OR in short 

if (value) {
//Your code 
}