Angular 5 typeerror：

Question

我在一个项目中使用Angular 5，我得到一个打字稿错误：

ERROR TypeError: Cannot read property 'indexOf' of undefined

我的代码应该做的是在输入更改上更新模板，如下所示：

模板：

<input #f (input)="filterResults(f.value)"/>

<div *ngIf="filteredCandidates.length">
    <ul class="filtered-candidates-list">
        <li *ngFor="let candidate of filteredCandidates">
            {{ candidate.name }}
        </li>
    </ul>
</div>

和component.ts：

  private queryString: string;
  private candidates: Candidate[] = []
  private filteredCandidates: Candidate[] = [];

  filterResults(queryString) {
    this.candidatesService.filterCandidates().subscribe(candidates => this.candidates = candidates);
    if (!queryString) {
      return;
    }
    else {
      this.candidates.filter(c => { c.name.indexOf(queryString) >= 0 });
    }
  }

我尝试在c.name上使用方法.contains（），并得到相同的结果。候选名称类型仍然是字符串，如预期的那样，以及输入也是一个字符串。但是，这就像我不能使用字符串方法只是因为打字稿被合并。

Answer 1

如果在某些情况下没有定义c.name，您可以像这样进行检查：

  this.candidates.filter(c => { 
      return c.name !== null && c.name.indexOf(queryString) >= 0 
  });

这里，！== null将检查null和undefined值。

Answer 2

多么愚蠢的错误。我不得不做一些错误处理。在数据库中，其中一个对象没有属性名称（未定义）。所以当循环到达那里时，代码就破了。我必须更好地处理错误。谢谢大家的建议。

Answer 3

看起来你正在尝试对集合candidates执行过滤操作，即使它还没有从API服务器中检索到。通过查看您的UI，您看起来不像基于查询字符串执行任何远程过滤。在这种情况下，我建议在开始时检索candidates集合，直到使input框禁用/ readonly。这样可以避免意外错误发生。

HTML

<input #f (input)="filterResults(f.value)" [readonly]="candidates.length"/>

<div *ngIf="filteredCandidates.length">
    <ul class="filtered-candidates-list">
        <li *ngFor="let candidate of filteredCandidates">
            {{ candidate.name }}
        </li>
    </ul>
</div>

零件

private queryString: string;
private candidates: Candidate[] = []
private filteredCandidates: Candidate[] = [];

getResults(){
    this.candidatesService.filterCandidates().subscribe(
       candidates => this.candidates = candidates || []
    );
};

filterResults(queryString) {
    if (!queryString) {
      return;
    }
    else {
      this.candidates.filter(c => { c.name && c.name.indexOf(queryString) >= 0 });
    }
}