我正在使用从primng进行的多选,并将选择限制设置为1。我在onInit中设置了值。发生的情况是,该值被选中但未禁用其他值。
以下是ts文件
export class AppComponent {
cities1 = [
{label:'New York', value:1},
{label:'Rome', value:2},
{label:'London', value:3},
{label:'Istanbul', value:4},
{label:'Paris', value:5}
];
data = [];
ngOnInit(){
this.data = [4];
}
}
并且html文件是
<p-multiSelect [options]="cities1" [(ngModel)]='data'
[selectionLimit]="1" ></p-multiSelect>
如果预先选择该值,如何禁用其他字段??
答案 0 :(得分:0)
这是一个旧的already reported issue,
开发人员尚未回应。我创建了一个PR to fix this issue,
直到PR合并或primeng团队提出解决方案,您才能解决它
使用ViewChild
修复程序。
ViewChild
修复程序:
primeng MultiSelect
具有一个名为maxSelectionLimitReached
的属性,该属性设置为
达到最大限制时为true。您必须自己在ngOnInit
中进行设置。跟随
注释作为步骤。
import { Component, ViewChild } from '@angular/core'; // import ViewChild
import { MultiSelect } from 'primeng/multiselect'; // import MultiSelect
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
@ViewChild('dataSelect', { static: true }) dataSelect: MultiSelect; // declare ViewChild
data = [];
cities1 = [
{ label: 'New York', value: 1 },
{ label: 'Rome', value: 2 },
{ label: 'London', value: 3 },
{ label: 'Istanbul', value: 4 },
{ label: 'Paris', value: 5 }
];
ngOnInit() {
this.data = [4];
this.dataSelect.maxSelectionLimitReached = this.data.length >= 1; // Set limit flag
}
}
将viewChild标识符添加到<p-multiSelect>
元素。
<p-multiSelect #dataSelect [options]="cities1" ... ></p-multiSelect>
答案 1 :(得分:0)
Munim Munna的答案比我的simple简单得多,但在我们的项目中,我们通过将选项the的disable设置为true来管理选择Limit(限制)。
selectionLimit: number = 2;
ngOnInit() {
this.data = [4,5];
this.updateOptionState(this.data)
}
updateOptionState(SelectedValue) {
if (SelectedValue.length == this.selectionLimit) { // ⚡ check the limit
this.cities1
.filter(item => SelectedValue.indexOf(item.value) === -1) // set other option
.forEach(i => {
i.disabled = true
})
} else {
this.cities1.forEach(item => item.disabled = false) // ? reset
}
}
模板
<p-multiSelect #dataSelect [options]="cities1" [(ngModel)]='data'
(ngModelChange)="updateOptionState(data)"></p-multiSelect>
答案 2 :(得分:0)
PrimeNG multiselect 具有属性 maxSelectionLimitReached 取决于 selectionLimit ,默认情况下为 false 。因此,不幸的是,当您通过 ngOnInit 传递数据时,它不会进行计算。您可以通过传递 true
轻松完成此操作ngOnInit() {
this.data = [4];
this.dataSelect.maxSelectionLimitReached = true; // Just set true :)
}