Angular：NGX Bootstrap，typeahead自定义模板查询突出显示

Question

在使用自定义模板进行预先输入时，是否有人知道如何突出显示工作？我一直在努力设计typeahead结果，似乎我需要使用optionsListTemplate？但是当使用ng-template时，我似乎失去了匹配查询突出显示功能，我不知道如何让它在我自己重新创建之外工作？

任何有关代码示例的帮助都将不胜感激！

Answer 1

查询突出显示不适用于自定义模板。您必须为此编写自己的逻辑.....就像我一样。

<ng-template  #customItemTemplate let-model="item" let-index="index" let-query="query">
            <div>
              <span [innerHTML]="patientAuthService.highlightQuery(model,query)"></span>
            </div>
          </ng-template>

您可以根据自己的知识对其进行修改。

highlightQuery(str, query): any {
    query = query.join(' ');
    if (str.toLocaleLowerCase().indexOf(query) > -1) {
      let left_str = str.substring(0, str.toLocaleLowerCase().indexOf(query));
      let right_str = str.substring(str.substring(0, str.toLocaleLowerCase().indexOf(query)).length + query.length, str.lenght);
      console.log(left_str+query+right_str);
      return '<h5>' + left_str + '<strong>' + query + '</strong>' + right_str + '</h5>';
    }
    else
      return '<h5>'+str+'</h5>';
  }