How to disable the other field if the value is pre-selected (primeng multiselet)?

Question

I am using multi-select from the primeng and set the selection Limit as 1. I am setting the value in onInit. What it is happening like, the value getting selected but not disabling for other values.

Following is the ts file

    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];
        }

    }

and the html file is

<p-multiSelect [options]="cities1" [(ngModel)]='data' 
      [selectionLimit]="1" ></p-multiSelect>

How to disable the other field if the value is pre-selected.?

Here is the stackblitz

Answer 1

更新：此问题已在primeng 8.0.2 版中修复

这是一个已经报告的旧问题，primeng 开发人员尚未对此做出回应。我已经创建了一个PR 来解决这个问题，直到 PR 被合并或者primeng 团队提出了一个修复程序，你可以使用一个ViewChild修复程序来解决它。

该ViewChild修复：

primengMultiSelect有一个名为的属性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>