angular - 无法获取未定义或空引用的属性 'toLowerCase'

Question

场景:我有一个文本框，下面是一个数据列表。当我在文本框中键入内容时，列表会根据文本框中的文本进行过滤。

代码:

管道:

@Pipe({
  name: 'search'
})

export class SearchPipe implements PipeTransform {
  transform(xxxs: IXxx[], searchInput: string): IXxx[] {
    if (!xxxs) {
      return [];
    }
    if (!searchInput) {
      return xxxs;
    }
    searchInput = searchInput.toLowerCase();

    return xxxs.filter(xxx => {
      let firstName = xxx.employee.firstName.toLowerCase();
      let lastName = xxx.employee.lastName.toLowerCase();

      return firstName.includes(searchInput) &&
        firstName.startsWith(searchInput[0]) ||
        lastName.includes(searchInput) &&
        lastName.startsWith(searchInput[0]);
    });
  }
}

HTML:

<input type="text" placeholder="search person"
    [(ngModel)]="searchText" />
...
<section * ngFor="let shift of shifts | search: searchText; let last = last">
    ...
</section>
<div * ngIf="searchText && (shifts | search: searchText).length === 0" class="no-content">
    No Shifts</div>

此代码适用于除 IE 和 Edge 之外的所有浏览器。为 includes 和 startsWith 添加了 polyfill，但仍然显示错误。

错误:

更新 #1:

我尝试了 consoling searchText，默认值设置为空字符串(即“”)，当我键入内容时它会显示在控制台中。使用调试器时，我没有收到此错误。奇怪。

Answer 1

用 indexOf() 方法代替 includes() 尝试一次。对于 startswith()，请在此处查看 polyfill https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith#Polyfill