选择结果后如何清除预输入？

Question

我正在使用 ng-bootstrap typeahead 组件来搜索客户数据库。当用户从预先输入的结果列表中选择客户时，我导航到客户详细信息页面。我有这个工作，但我想在导航发生后清除输入字段。我已经尝试在 selectItem 事件逻辑中将模型设置为 null 或空字符串，但这不起作用：

客户搜索-typeahead.component.html

<template #resultTemplate let-r="result" let-t="term">
  <div>
    <div>
      {{r.resource.name[0].given}} {{r.resource.name[0].family}}
    </div>
    <div>
      {{r.resource.birthDate | date: 'dd/MM/yyyy'}}
    </div>
  </div>
</template>

<input type="text" class="form-control" [resultTemplate]="resultTemplate" (selectItem)="onSelect($event)"
       [(ngModel)]="model" placeholder="Start typing a customer name..." [ngbTypeahead]="search"/>

客户搜索-typeahead.component.ts

@Component({
  selector: 'customer-search-typeahead',
  template: require('./customer-search-typeahead.component.html'),
  styles: [`.form-control { width: 300px; }`]
})
export class CustomerSearchTypeaheadComponent {

  model: any;
  searching: boolean;

  constructor(private customerService: CustomerService, private router: Router) {}

  onSelect($event) {
    this.router.navigate(['/customers', $event.item.resource.id]);
    this.model = null;
  };

  search = (text$: Observable<string>) =>
   //omitted for brevity
}

做出选择后，预输入看起来像这样：

解决方案

客户搜索-typeahead.component.html

<input type="text" class="form-control" #input [ngbTypeahead]="search" (selectItem)="onSelect($event); input.value='' ">

客户搜索-typeahead.component.ts

onSelect($event, input) {
    $event.preventDefault();
    this.router.navigate(['/customers', $event.item.resource.id]);
  };

Answer 1

您遇到的问题是由于 NgModel 指令正在异步更新模型绑定，而实际模型是在 onSelect 方法之后更新的被执行。因此，您的模型更新会被 NgModel 功能覆盖。

幸运的是，我们（ng-bootstrap 作者）准备好了所有的灵活点来涵盖您的用例:-)您可以做几件事。

首先，传递给 onSelect 方法的 $event 对象具有 preventDefault() 方法，您可以调用它来否决项目选择（结果写回模型和输入字段更新）。

$event.preventDefault() 将确保模型不更新，输入字段不更新所选项目。但是用户输入的文本仍将是输入的一部分，因此如果您也想清除它，可以直接更新 input 的 value 属性。

下面是演示所有这些技术的代码：

onSelect($event, input) {
    $event.preventDefault();
    this.selected.push($event.item);
    input.value = '';
  }

其中 input 参数是对输入 DOM 元素的引用：

<input type="text" class="form-control" #input 
   [ngbTypeahead]="search" (selectItem)="onSelect($event, input)">

最后，这是一个 plunker 在实践中展示了所有这些：http://plnkr.co/edit/kD5AmZyYEhJO0QQISgbM?p=preview

Answer 2

以上为模板ref值解决方案

这是 ngModel 解决方案。

Html代码：

<input type="text" class="form-control" [resultTemplate]="resultTemplate" (selectItem)="onSelect($event)"
       [(ngModel)]="model" placeholder="Start typing a customer name..." [ngbTypeahead]="search"/>

组件代码：

onSelect($event) {
    $event.preventDefault();
    this.model = null;
    this.router.navigate(['/customers', $event.item.resource.id]);
};

$event.preventDefault();

对于 ngModel 值更改为空

选择结果后如何清除预输入？

How to clear the typeahead input after a result is selected?

typeahead

ng-bootstrap