Angular 4管道无法读取未定义的属性“toLowerCase”

Question

我已经实现了以下过滤器/管道来大写首字母，导入到 module.ts 等中。

管道.ts

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


@Pipe({name: 'capitalize'})
export class CapitalizePipe implements PipeTransform {

   transform(str:any) {

     var splitStr = str.toLowerCase().split(' ');
    for (var i = 0; i < splitStr.length; i++) {

        splitStr[i] = splitStr[i].charAt(0).toUpperCase() + 
        splitStr[i].substring(1);     
    }
    // Directly return the joined string
    return splitStr.join(' '); 
   }
 }

一切正常，除非我在这个表达式中使用它，我得到 - 无法读取未定义的属性'toLowerCase'

 {{messageItem?.cc && messageItem?.cc[0]?.name | capitalize}}

Answer 1

管道初始执行为 null，因为这是异步的。你需要处理undefined 变量

var splitStr = str.toLowerCase().split(' ') || []

Answer 2

在调用.toLowerCase之前在管道中添加一个空/未定义检查以检查字符串是否为空

if (str === undefined) return [];