Question

我很难在角度5工作中获得Bootstraps typeahead会很感激一些建议。我遇到的问题是我不知道如何在bootstraps搜索方法示例中将输入字段设置为等于城市+州的exaple“New york，NY”。我不熟悉Typescript和JavaScript中的新胖箭头功能，我们将非常感谢您的帮助。

模型对象数组

public model: any;

我收到的数据示例

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

此处的搜索方法我正在尝试设置位置项以过滤“城市”，“+州”

  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内的箭头函数需要将（转换）用户在搜索框中键入的字符串的值转换为一系列项目作为建议提供给用户。

你开始很好，通过询问术语是否只有一个字符长（或一个空字符串），甚至不运行搜索，imediatelly返回空数组。对于另一部分，您需要找到要向用户显示的项目。

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

// 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
}

Bootstraps在角度5中遇到麻烦

1 个答案: