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() 方法，得到了相同的结果。正如预期的那样，typeof candidate.name 仍然是字符串，输入也是字符串。但是，由于合并了打字稿，我好像不能使用字符串方法。

Answer 1

您似乎正在尝试对集合 candidates 执行过滤操作，即使它尚未从 API 服务器检索到。通过查看您的 UI，您似乎没有根据查询字符串执行任何远程过滤。在这种情况下，我建议在开始时检索 candidates 集合，然后创建 input 框 disabled/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 });
    }
}

Answer 2

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

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

此处，!== null 将检查空值和未定义值。

Answer 3

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

Angular 5 typeerror:

Angular 5 typeerror:

angular

typescript

typeerror

undefined-function