Question

我经常使用<p-selectButton>，有时需要禁用其某些选项。怎么做？在我的graphManager.ts中，我有：

graphTypes: Array<SelectItem> = [
            {label: 'bar', value: 'bar', disabled : true },
            {label: 'line', value: 'line', disabled : false},
];

selectedGraphType: SelectItem = this.graphTypes[0];

然后，在graphManager.html中，我有：

<p-selectButton class="customSelector select-button-big ui-button-rounded"
              [options]="graphTypes" 
              [(ngModel)]="selectedGraphType"
              (onChange)="setSelectedGraphType($event)" >
</p-selectButton>

我有我的自定义SelectItem.ts：

export interface SelectItem {
    label?: string;
    value: any;
    styleClass?: string;
    icon?: string;
    title?: string;
    disabled?: boolean;
}

但是所有选项仍然可以单击。如何禁用某些选择选项？唯一有效的方法是深入node_modules/primeng/components/selectbutton/selectbutton.js并更改第55行：

SelectButton.prototype.onItemClick = function (event, option, checkbox, index) {
        if (this.disabled || option.disabled) {

因此，我添加了|| option.disabled部分。但是，您将同意这是不可接受的选项，因为它会更改node_modules。但这是唯一对我有用的东西。

Answer 1

您只需添加[disabled] =“ true”，

<p-button icon="pi pi-check" [disabled]="true" label="Disabled"></p-button>

修改

关于p-selectButton

可以使用SelectItem API的disable属性来阻止选择特定选项。

示例

cards: SelectItem[];

this.cards= [
            {label: 'Paypal', value: 'PayPal', disabled : true },
            {label: 'Visa', value: 'Visa', disabled : false},
            {label: 'MasterCard', value: 'MasterCard', disabled : false}
        ];

在Angular中，使用PrimeNG如何禁用某些p-selectButton选项？

1 个答案: