如何禁用下拉选择？答案

【问题标题】：how to disable dropdown selection?如何禁用下拉选择？
【发布时间】：2022-01-07 15:02:29
【问题描述】：

我有一个包含 2 个选项的下拉菜单：

我希望用户能够看到这两个选项（Cips、Projects）；但是，我不想让用户选择其他项目。

我们如何允许用户点击下拉菜单并查看所有选项，但禁止选择任何其他选项？

这个下拉列表是这样定义的：

      <p-dropdown [(ngModel)]="editRagColumns.BaseObjectType"
             name="RagBasicType"
             type="text"
             class="form-control"
             id="RagBasicType"
             [options]="baseObjectTypes"
             optionLabel="BaseObjectTypeName"
             [style]="{'width':'100%', 'border-color':'transparent'}"
                  >
        </p-dropdown>

【问题讨论】：

尝试添加：optionDisabled

标签： html css angular

【解决方案1】：

根据文档： https://www.primefaces.org/primeng/showcase/#/dropdown

你可以用这个optionDisabled

【讨论】：

运气不好i.imgur.com/3Z8kN4V.gif

【解决方案2】：

您必须将以下属性添加到您的“p-dropdown”组件中。

optionDisabled="BaseObjectTypeName"

这是我的 ts 和 html 文件，我已确认它可以正常工作。

ts 文件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-question1',
  templateUrl: './question1.component.html',
  styleUrls: ['./question1.component.sass']
})
export class Question1Component implements OnInit {

  BaseObjectTypeName: string = "BaseObjectTypeName";

  baseObjectTypes: any[] = [
    { BaseObjectTypeName: "tab1" },
    { BaseObjectTypeName: "tab2" },
  ];

  constructor() { }

  ngOnInit(): void {
  }

}

html 文件

<p-dropdown
  name="RagBasicType"
  type="text"
  class="form-control"
  id="RagBasicType"
  [options]="baseObjectTypes"
  optionLabel="BaseObjectTypeName"
  [style]="{'width':'100%', 'border-color':'transparent'}"
  optionDisabled="BaseObjectTypeName"
>
</p-dropdown>

希望对你有所帮助。

【讨论】：

运气不好i.imgur.com/3Z8kN4V.gif
您是否尝试过使用我的代码并对其进行一些更改以检测产生错误的行？如果您复制并粘贴我的代码，您应该会看到该功能正在运行，并且从那里开始，您可以用您的代码更改我的代码，直到您检测到该错误已出现。如果没找到问题可以传你的ts代码，说不定我能找到问题。
imgur.com/a/zbt9Dc0 这是我的代码结果的 gif

【解决方案3】：

如果您使用的是primeng 11.0.0 及更高版本，那么optionDisabled 属性是可行的方法，正如其他人已经提到的那样。

如果您使用的是以前的版本，那么您必须确保以下几点：

传递给options 的值必须是SelectItem[ ] 类型或至少具有来自SelectItem 类型的label、value 和disabled 属性。
- label 将是下拉选项文本
- value 可以是任何类型，即对象或字符串
- disabled 将是布尔类型，将其设置为 true 将禁用下拉选项
不应使用 p-dropdown optionLabel

在您的情况下，baseObjectTypes 应该如下所示：

    baseObjectTypes = [
      { label: 'Projects', value: 'Projects', disabled: true },  // <--- value can be object too
      { label: 'Cips', value: 'Cips', disabled: true 
    ]

【讨论】：