角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