Angular 2+，双向绑定，搜索 json 对象并显示结果问题答案

【问题标题】：Angular 2+, two way binding, search json Object and display results issueAngular 2+，双向绑定，搜索 json 对象并显示结果问题
【发布时间】：2018-03-28 19:26:28
【问题描述】：

我有以下 Js/Json。我正在尝试创建一个搜索框，以便可以搜索列表中的项目。从 api 我得到以下对象。它有 2000 个项目，我想对其进行搜索。当我输入搜索时，它应该实时更新包含输入的单词的找到的项目（双向绑定）

我认为使用管道太慢了？我很难理解这是 jsObject 还是 json 对象。

另外，如果我搜索它，它将显示 1900 个结果，如何将这些结果限制为 8 个？

我尝试了几个管道和下面的循环，但这不起作用。

objectFromApi = {"item1": "valueItem1, "item2", "valueItem2}
var keys = []
var keys = Object.getOwnPropertyNames(objectFromApi)
 for(var i=0;i<keys.length;i++){
    if(keys[i].indexOf(str) != -1){
       this.resultArr.push(keys[i]);
    }
  }

【问题讨论】：

标签： angular search binding

【解决方案1】：

我创建了一个 stackblitz 来向您展示我会做什么： https://stackblitz.com/edit/angular-vzjw4c

首先注册一个将绑定到输入的 formControl，然后获取其值更改。

每次您输入内容时，您都会过滤从您的 api 获得的对象中提供的键。

希望对您有所帮助，如果您需要更多解释，我很乐意提供帮助

【讨论】：

谢谢它的工作！有没有办法同时显示项目的价值，以便同时显示项目和价值？但只搜索该项目。我将如何进行格式化，使其仅在 HTML 元素中显示 8 个结果。而不是 100 个结果？
对我有用的方法是在表格中显示结果，让您输入 item1，然后给出 item11 item12 item13 直到我想要选择的 item 21。一旦做出选择，它将显示键的值。如果我从显示的 10 个选项中选择 item12，它将显示 item12 的值。我现在可以得到这个值，所以我只是想让搜索结果可选择。我想我可以通过从每个结果中制作按钮来使其工作。有没有办法以形式或类似的方式使用 [(NGmodel)]。那么我可以将输入值更新为选定的值吗？
将您的表单控件实例视为 ngmodel 的包装器，它为您提供有关您与最初在表单控件中设置的数据交互方式的信息。在您的情况下，您应该有一个为表单控件设置新值的函数。 this.searchInputFG.controls.searchInputFC.setValue(newValue);