无法获取未定义或空引用的属性“ 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：

我尝试安慰searchText，默认值设置为空字符串（即''），并且当我键入内容时它将显示在控制台中。使用调试器时，我没有收到此错误。很奇怪。

Answer 1

使用includes()方法尝试一次，而不是indexOf()。 对于startswith()，请参见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith#Polyfill