Angular NgbTypeahead

Question

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

一切正常,但我希望在一个文本框上有多个值.由于该字段是来自组,一旦选择了一个值,它就可以允许下一个,而不删除前一个.

Answer 1

您可以非常轻松地在ng-bootstrap typeahead之上构建自定义多值选择框."技巧"是防止选择项目(因此它不作为单个值绑定到模型)并将其推送到集合中.在听取selectItem活动时非常容易实现,例如(selectItem)="selected($event)":

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

只要您在集合中获得所选项目,就可以在输入字段之前显示它:

<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,你就有了多选工作!以下是一个关于plunker的完整示例:https://plnkr.co/edit/sZNw1lO2y3ZZR0GxLyjD ？ p = preview

另请参阅https://github.com/ng-bootstrap/ng-bootstrap/issues/532中的详细讨论