ERROR TypeError：无法读取角度自定义管道中null的属性'split'

Question

我收到此错误ERROR TypeError：使用此角形管道时无法读取null错误的属性'split'，这是代码。

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

@Pipe({
  name: 'fullDate'
})
export class DatePipe implements PipeTransform {

  transform(value:any ) {
    const dateArray = value.split('-');
    const date = dateArray[2].substr(0, 1) === '0' ? dateArray[2].substr(1, 1) : dateArray[2];
    const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  
    return `${date} ${months[dateArray[1] - 1]} ${dateArray[0]}`;
  }

}

{{lorem？.lorem_date | fullDate}}

Answer 1

在管道中添加null检查：

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

@Pipe({
  name: 'fullDate'
})
export class DatePipe implements PipeTransform {
  transform(value: any) {
    if (value) {
      const dateArray = value.split('-');
      const date = dateArray[2].substr(0, 1) === '0' ? dateArray[2].substr(1, 1) : dateArray[2];
      const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

      return `${date} ${months[dateArray[1] - 1]} ${dateArray[0]}`;
    }
    return value;
  }
}

OR

将内容放入*ngIf：

<p *ngIf="lorem">{{ lorem.lorem_date | fullDate }}</p>

Answer 2

基本上，您的代码中发生的事情是，当它第一次运行时，值varible没有分配任何值。因为它会返回并错误提示Cannot read property 'split' of null验证管道内的值是否具有值。请在下面找到示例代码：

 

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

    @Pipe({
      name: 'fullDate'
    })
    export class DatePipe implements PipeTransform {

      transform(value:any ) {
        if(value){
        const dateArray = value.split('-');
        const date = dateArray[2].substr(0, 1) === '0' ? dateArray[2].substr(1, 1) : dateArray[2];
        const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
      
        return `${date} ${months[dateArray[1] - 1]} ${dateArray[0]}`;
      }


    }

Answer 3

错误意味着您正在分割一个空值，因此您只需添加一个检查即可。

尝试这样：

transform(value:any ) {
   if(value){ 
        const dateArray = value.split('-');
        const date = dateArray[2].substr(0, 1) === '0' ? dateArray[2].substr(1, 1) : dateArray[2];
        const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

        return `${date} ${months[dateArray[1] - 1]} ${dateArray[0]}`;
    }
  }