在Angular中，使用PrimeNG，如何设置一些p-selectButton选项被禁用？

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的disabled属性可以防止选择特定选项。

例

cards: SelectItem[];

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