TypeError: Cannot read property 'toLowerCase' of null in angular5-data-table angular 2+

Question

我使用angular5-data-table来显示我的参与者。最近，我开始在搜索或过滤 table 时出错。错误是：

TypeError: Cannot read property 'toLowerCase' of null

我不知道为什么我有null。很奇怪，我没有像上周那样出现任何问题。

我的搜索或过滤器 html 代码是：

<input type="text" class="form-control input-md" placeholder="Search by first name" #query (keyup)="searchParticipant(query.value)" [(ngModel)]="filter.name">

我的 component.ts 代码是：

searchParticipant(query: string) {
  const filteredParticipants = (query) ?
  this.participants.filter(p => p.firstName.toLowerCase().includes(query.toLowerCase())) :
  this.participants;
  this.initializeTable(filteredParticipants);
}

我能够列出所有参与者，能够浏览页面和排序。但是，过滤会在上面抛出该错误。我重构了代码并查看了他们的网站，但到目前为止运气不佳。任何帮助将不胜感激。

编辑：这是完整的 component.ts 文件。请注意，我在这里使用 Member 而不是 Participant。但是我也有同样的问题。

export class MembersListComponent implements OnInit {
  members: Member[];
  totalMembers: any;

  items: Member[] = [];
  itemCount: number;
  filter: any = {};
  tableResource: DataTableResource<Member>;

  allMembers: Member[];

  constructor(private memberService: MemberService, private alertifyService: AlertifyService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.loadMembers();
  }

  private initializeTable(members: Member[]) {
    this.tableResource = new DataTableResource(members);
    this.tableResource.query({ offset: 0 }).then(items => this.items = items);
    this.tableResource.count().then(count => this.itemCount = count);
 }

  reloadItems(params: any) {
    if (!this.tableResource) { return; }
    this.tableResource.query(params).then(items => this.items = items);
  }

  loadMembers() {
    this.memberService.getAllMembers().subscribe((members: Member[]) => {
      this.members = members;
      this.initializeTable(members);
    }, error => {
      this.alertifyService.error(error);
    });
  }

  searchMember(query: string) {
    const filteredMembers = (query) ?
      this.members.filter(p => p.firstName.toLowerCase().includes(query.toLowerCase())) :
      this.members;
      this.initializeTable(filteredMembers);
  }
}

Answer 1

我强烈建议将您的代码分成小块，这将有助于您正确调试，并且您应该在使用前验证 firstName 是否存在于当前对象中

searchParticipant(query: string) {
  let filteredParticipants = [];
  if (query) {
    filteredParticipants = this.participants.filter(p => {
      if (p.firstName && p.firstName.toLowerCase().includes(query.toLowerCase())) {
        return true;
      }

      return false;
  }

  this.initializeTable(filteredParticipants);
}

TypeError: Cannot read property 'toLowerCase' of null in angular5-data-table angular 2+

TypeError: Cannot read property 'toLowerCase' of null in angular5-data-table angular 2+

angular-datatables

angular