在 ng-bootstrap Typeahead 中选择多个值

Question

我正在使用来自 Angular ng-bootstrap - https://ng-bootstrap.github.io/#/components/typeahead/examples

的预输入

一切正常，但我想在一个文本框中显示多个值。

由于该字段是一个表单组，一旦选择了一个值，它应该可以允许下一个，而无需删除前一个。

Answer 1

您可以很容易地在 ng-bootstrap typeahead 之上构建自定义多值 select 框。 "trick" 是为了防止 select 项的离子（因此它不会作为单个值绑定到模型）并将其推送到集合中。在监听 selectItem 事件时很容易实现，例如：(selectItem)="selected($event)":

selected($e) {
  $e.preventDefault();
  this.selectedItems.push($e.item);
  this.inputEl.nativeElement.value = '';
}

在集合中获得 selected 项目后，您可以将其显示在输入字段之前：

<div class="form-control">
  <span class="btn btn-primary btn-sm selected" *ngFor="let item of selectedItems">
    {{item}}
    <span class="close-selected" (click)="close(item)">&nbsp;x</span>
  </span>
  <input #input type="text" class="input" [ngbTypeahead]="search" (selectItem)="selected($event)" autofocus placeholder="Select something..."/>
</div>

添加一些自定义 CSS，您就得到了一个 multi-select 工作！这是一个 plunker 中的完整示例：https://plnkr.co/edit/sZNw1lO2y3ZZR0GxLyjD?p=preview

另请参阅 https://github.com/ng-bootstrap/ng-bootstrap/issues/532

中的详细讨论

在 ng-bootstrap Typeahead 中选择多个值

Choosing multiple values in ng-bootstrap Typeahead

angular-ui-typeahead

angular-bootstrap

ng-bootstrap

angular