3

我在一个项目中使用 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() 方法，得到了相同的结果。正如预期的那样，candidate.name 的类型仍然是字符串，输入也是字符串。但是，就像我不能使用字符串方法只是因为打字稿被合并了。

4

3 回答 3

1

candidates即使尚未从 API 服务器检索到集合，您似乎也正在尝试对集合执行过滤操作。通过查看您的 UI，您似乎没有执行任何基于查询字符串的远程过滤。在这种情况下，我建议candidates在开始时检索集合，然后将input框禁用/只读。这样可以避免发生意外错误。

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 });
    }
}
于 2018-03-01T20:26:53.990 回答
1

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

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

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

于 2018-03-01T20:30:28.807 回答
0

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

于 2018-03-01T20:49:02.877 回答