PrimeNg 禁用手风琴展开按钮

Question

有没有办法有条件地禁用 PrimeNg 手风琴中的展开按钮而不禁用整个标题？我在标题中有一些其他按钮并希望它们可单击，我只想禁用展开按钮。我在每个手风琴的主体中显示一些项目，但如果没有项目我想禁用扩展按钮。我未能根据文档找到一种简单的方法来做到这一点。

Answer 1

您可以使用

disabled

组件的

p-accordionTab

输入，如下所示：

<p-accordion>
    <p-accordionTab header="Header I" [disabled]="items1.length === 0">
        <div *ngFor="let item of items1">{{item.caption}}</div>
    </p-accordionTab>

    <p-accordionTab header="Header II" [disabled]="items2.length === 0">
        <div *ngFor="let item of items2">{{item.caption}}</div>
    </p-accordionTab>
</p-accordion>

Answer 2

我也遇到了类似的问题。这是我的解决方案。

我创建了一个信号来控制手风琴状态。初始

false

值表示手风琴未禁用。

export class YourComponent {
    accordionTabDisabled = signal<boolean>(false);
}

接下来，将其绑定到您的

accordionTab

组件。在处理按钮的

onClick

事件时，我将信号设置为

true

。我稍后会发出一个事件，并在处理它时将信号设置为

false

，以便再次启用手风琴。在本例中，我处理

onHide

事件。

<p-accordion>
    <p-accordionTab [disabled]="accordionTabDisabled()">
        <ng-template pTemplate="header">
            <h1>Accordion Header</h1>
            <p-button (onClick)="accordionTabDisabled.set(true)"></p-button>
        </ng-template>
        <p-dialog header="My dialog" (onHide)="accordionTabDisabled.set(false)">
            Dialog content
        </p-dialog>
    </p-accordionTab>
</p-accordion>