angular - 如果值是预先选择的(primeng multiselect)，如何禁用其他字段？

我正在使用从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>

如果预选该值，如何禁用其他字段？

这是stackblitz

最佳答案

这是一个古老的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>