角NgbTypeahead

Question

我使用预输入的角度引导 - https://ng-bootstrap.github.io/#/components/typeahead/examples

一切工作正常，但我想在一个单一的文本框中多个值。 由于该字段是来自组，所以一旦选择了一个值，它可以允许下一个值，而不删除前一个值。

Answer 1

您可以很容易地在ng-bootstrap typeahead之上构建一个自定义的多值选择框。 “诀窍”是防止选择一个项目（因此它不会被绑定到模型上作为单个值），而是将其推送到集合。很容易实现边听selectItem事件，例：(selectItem)="selected($event)"：

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

：

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

只要你收集了中所选的项目，你可以输入字段之前显示它

洒了一些自定义的CSS，你有一个多选择工作！这里是一个plunker一个完整的例子：https://plnkr.co/edit/sZNw1lO2y3ZZR0GxLyjD?p=preview

另见详细讨论https://github.com/ng-bootstrap/ng-bootstrap/issues/532