有没有办法使用 ng select 进行多个选择,并且可以在同一个选择中多次使用相同的值? 我只能实现多个,每个值只能选择一次:
HTML 代码:
<ng-select [closeOnSelect]="false" [selectableGroup]="true" [items]="allowedValues"
[(ngModel)]="selectedValuesArray" [selectableGroupAsModel]="false"
(change)="raiseChangeEvent($event)" name="dropdown-element" [multiple]="true" [maxSelectedItems]="maxLength"
[clearable]="false">
<ng-template ng-option-tmp let-item="item">
<div class="option-line">
<p>{{item == null ? 'N/A' : item}}</p>
</div>
</ng-template>
</ng-select>
答案 0 :(得分:0)
您可以利用 bindLabel 和 bindValue 属性。 假设您传入以下项目:
allowedValues= [
{label: 1, value: 'first_0'},
{label: 2, value: 'second_0'}
]
您的 HTML 将如下所示,注意添加 bindLabel 和 bindValue,更改 (change)
和 [hideSelected]
属性:
<ng-select [closeOnSelect]="false" [selectableGroup]="true" [items]="allowedValues"
[(ngModel)]="selectedValuesArray" [selectableGroupAsModel]="false"
(change)="raiseChangeEvent($event); addItem($event)" name="dropdown-element" [multiple]="true" [maxSelectedItems]="maxLength"
[clearable]="false" bindLabel="label" bindValue="value" [hideSelected]="true">
<ng-template ng-option-tmp let-item="item">
<div class="option-line">
<p>{{item == null ? 'N/A' : item}}</p>
</div>
</ng-template>
</ng-select>
无论何时选择一个项目,您都可以使用 addItem() 函数在列表中插入一个新项目。例如,当用户选择 1 时,将 {label: 1, value: 'first_1'}
添加到 allowedValues
。这样,您最终会得到一组唯一的值,但用户会被欺骗相信他实际上是一遍又一遍地点击相同的项目。