angular - 我无法在 primeNg Angular6 多选下拉菜单中设置选择限制

Question

我正在使用PrimeNG，但无法限制下拉值的选择。请帮忙。

零件：

import {SelectItem} from 'primeng/api';

interface City {
    name: string,
    code: string
}

export class MyModel {

cities1: SelectItem[];

cities2: City[];

selectedCities1: City[];

selectedCities2: City[];

constructor() {
    //SelectItem API with label-value pairs
    this.cities1 = [
        {label:'New York', value:{id:1, name: 'New York', code: 'NY'}},
        {label:'Rome', value:{id:2, name: 'Rome', code: 'RM'}},
        {label:'London', value:{id:3, name: 'London', code: 'LDN'}},
        {label:'Istanbul', value:{id:4, name: 'Istanbul', code: 'IST'}},
        {label:'Paris', value:{id:5, name: 'Paris', code: 'PRS'}}
    ];

    //An array of cities
    this.cities2 = [
        {name: 'New York', code: 'NY'},
        {name: 'Rome', code: 'RM'},
        {name: 'London', code: 'LDN'},
        {name: 'Istanbul', code: 'IST'},
        {name: 'Paris', code: 'PRS'}
    ];
}

}

HTML：

<p-multiSelect [options]="cities" formControlName="selectedCities"></p-multiSelect>

如何使用selectionLimit此处的属性来限制复选框的数量

请参考https://www.primefaces.org/primeng/#/multiselect

标签： angularprimengmulti-select

Answer 1

您可以使用 [selectionLimit] 来限制 ex 的选择：

<p-multiSelect [options]="cities2" [selectionLimit]="2" [(ngModel)]="selectedCities2" optionLabel="name"></p-multiSelect>

在上面的示例中，您只能选择两个项目。

请参阅以下 stackBlitz 示例

堆栈闪电战