函数返回不需要的数据

Question

我有一个JSON文件，其中包含一些跑步者的数据。我正在尝试使用以下方法过滤一些数据：

performFilterByRunnerName(filterBy: string):IRunners[]{
return this.runners.filter(x=>x.runnerName=filterBy);
}

HTML的一部分是：

<input #filterinputrunner id="runnerFilter" type="text" 
(change) = "performFilterByRunnerName(filterinputrunner.value)"
[ngModel]='listRunnerFilter'>

我有一个IRunner类型(接口(的列表，它保存了跑步者的数据。当更改input值时，发生的情况是所有runners的runnerName字段都会更改，而不是使用输入值过滤跑步者。我做错了什么？

Answer 1

(x=>x.runnerName=filterBy)

您想比较而不是分配

(x=>x.runnerName==filterBy)

应该是正确的。投票结束。

Answer 2

您的筛选条件似乎不正确。您正在为每个跑步者指定(=(filterBy属性。

您想要的是一个相等条件(===(。

return this.runners.filter(x => x.runnerName === filterBy);

Answer 3

突出显示的这一行代码正在分配值，而不是进行比较。

返回this.runner.filter(x=>x.runnerName=filterBy(

你需要做一个比较，比如：

return this.runners.filter(x=>**x.runnerName === filterBy**) 

Answer 4

如果您使用change，它不会在您键入时更新筛选结果，只会在blur上更新。如果希望在键入时更新列表，则应考虑使用keyup。

(keyup) = "performFilterByRunnerName(filterinputrunner.value)"

此外，基于结果中包含的筛选器搜索进行筛选，而不是基于精确的字符串搜索。这将产生更好的搜索结果：

onFilterChange(filterBy) {
this.filteredUsers = [...this.users.filter(user => user.name.indexOf(filterBy) > -1)];
}

这是样品StackBlitz供您参考。