在Angular 5中输入引导程序的麻烦

Question

我很难在Angular 5工作中获得引导程序打字，这将感谢一些建议。我遇到的问题是，我不知道如何将输入字段设置为Bootstraps搜索方法中的Exaple" New York，NY"的城市 状态。我是Typescript的新手和JavaScript中新的Fat Arrow功能的任何帮助，都将不胜感激。

对象的模型数组

public model: any;

我得到的数据示例

  {
    "city":"New York",
    "latitude":40.7127837,
    "longitude":-74.0059413,
    "state":"New York",
    "stateCode":"NY"
   }

搜索方法在这里我试图将位置项设置为过滤'City' " state"

  search = (text$: Observable<string>) => text$
  .debounceTime(200)
  .distinctUntilChanged()
  .map(term => term.length < 2 ? [] : this.locationItems.filter(item => item.city.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10));

Answer 1

链中的最后一个 map中的箭头函数需要 map （变换）用户已在搜索框中输入到array的字符串的值作为建议的物品。

您从良好开始，从askin开始，术语是否只有一个字符（或一个空字符串），甚至可以运行搜索，imediatelly返回空数组。另一方面，您需要找到要向用户提供的项目。

此部分取决于您的业务逻辑，但是我认为您希望用户通过state或stateCode搜索？无论如何，这部分是您的业务逻辑，您可以根据您的Butniess模型进行更改和改进。我在下面的代码中提供了非常简单的功能。

// util function
// returns true if the "term" can be used to match the "item" from your data
// change this according to your business logic
function matches(term: string, item: Item): boolean {
  return item.state.toLowerCase().includes(term.toLowerCase())
    || item.stateCode.toLowerCase().includes(term.toLowerCase())
}

最后一个map中的lambda可以像这样。

term => {
  if (term.length < 2) {
    return []
  }
  // arary of matching results
  const matching = this.filter(item => matches(term, item))
  // now we transform this to the format you specified
  const formatted = matching.map(item => `${item.state}, ${item.stateCode}`)
  return formatted
  // you can also .slice(0, 10) here like you did in your example to keep the number of suggestions no more than 10
}