我正在使用 Angular ng-bootstrap 的 typeahead - https://ng-bootstrap.github.io/#/components/typeahead/examples
一切正常，但我想在一个文本框中显示多个值。
由于该字段是一个表单组，一旦选择了一个值，它应该可以允许下一个，而无需删除前一个。
最佳答案
您可以很容易地在 ng-bootstrap typeahead 之上构建自定义多值选择框。 “技巧”是防止选择一个项目(因此它不会作为单个值绑定(bind)到模型)并将其推送到集合中。在监听 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)"> 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 中的详细讨论
关于angular - 在 ng-bootstrap Typeahead 中选择多个值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45647909/