角度：将下拉列表中的一个元素设置为readonly

发布于 2025-01-21 04:47:00 字数 765 浏览 3 评论 0原文

假设我有一个下拉菜单，其中包含以下选项：“工作”，“释放”，“打开”。第二个选项“释放”应与“工作”和“打开”相比。我该怎么做？

模板看起来像这样：

<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

原文

Let's say I have a dropdown menu, with the following options: "WORK", "RELEASE", "OPEN". The second option "RELEASE" should be readonly in contrast to "WORK" and "OPEN". How can I do this?

The template looks like this:

<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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

池木 2025-01-28 04:47:00

您可以使用“ nofollow noreferrer”> primeng primeng文档，您可以使用OptionsLabel和optionsDisabled属性中指定的选项。
为此，您可以按以下方式定义数据：

  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"
    >

您可以检查更新的在这里示例

You can use options specified in the optionsLabel and optionsDisabled properties as described in PrimeNg documentation.
To do so, you can define your data as follow:

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

And use the follow settings:

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

You can check the updated sample here

回复收藏 0 原文

~没有更多了~