ng select - 多个值 - 多次选择相同的值

Question

有没有办法使用 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>

Answer 1

您可以利用 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。这样，您最终会得到一组唯一的值，但用户会被欺骗相信他实际上是一遍又一遍地点击相同的项目。