Angular: 将下拉列表中的一个元素设置为只读

Question

假设我有一个下拉菜单，其中包含以下选项：“WORK”、“RELEASE”、“OPEN”。第二个选项“RELEASE”应该是只读的，与“WORK”和“OPEN”相反。我该怎么做？

模板如下所示：

<form [formGroup]="form">
    <div class="flex">
        <div class="col-3">
            <div class="flex flex-row align-items-center">
                <label class="col-6">Status</label>
                <p-dropdown
                    [options]="workStatus"
                    [showClear]="true"
                    formControlName="workingStatus"
                    class="col-6">
                </p-dropdown>
            </div>

Stackblitz

Answer 1

您可以使用 optionsLabel 和 optionsDisabled 属性中指定的选项，如 PrimeNg documentation 中所述。为此，您可以按如下方式定义数据：

  workStatus: any[] = [{name: 'WORK', disabled : true },{name:  'RELEASE'}, {name:'OPEN'}];

并使用以下设置：

 <p-dropdown
      [options]="workStatus"
      [showClear]="true"
      formControlName="workingStatus"
      (onChange)="onDropdownChange($event.value)"
      class="col-6"
      optionLabel="name"
      optionDisabled="disabled"
    >

您可以查看更新后的sample here

Angular: 将下拉列表中的一个元素设置为只读

Angular: Set one element in dropdown list to readonly

typescript

primeng

angular

primeng-dropdowns