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

时间:2021-02-03 10:57:59

标签: html angular typescript

有没有办法使用 ng select 进行多个选择,并且可以在同一个选择中多次使用相同的值? 我只能实现多个,每个值只能选择一次: multiple with each value only once

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>

1 个答案:

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