时间戳

首页 > 解决方案 > Angular PrimeNG 10 显示，而不是切换，可扩展的表格行

javascript - Angular PrimeNG 10 显示，而不是切换，可扩展的表格行

问题描述

我知道如何使用pRowToggler指令在 PrimeNG 中切换可扩展表格行。效果很好。

现在我需要向表格行添加一个按钮，该按钮只打开该行，而不是切换它。换句话说，只有一种方式：单击它以打开该行。当行打开时单击它，什么都不会发生。

我找不到打开行的方法，只有一种toggleRow方法。这甚至可能吗？

这里有指令，来自他们的 github：

@Directive({
    selector: '[pRowToggler]'
})
export class RowToggler {

    @Input('pRowToggler') data: any;

    @Input() pRowTogglerDisabled: boolean;

    constructor(public dt: Table) { }

    @HostListener('click', ['$event'])
    onClick(event: Event) {
        if (this.isEnabled()) {
            this.dt.toggleRow(this.data, event);
            event.preventDefault();
        }
    }

    isEnabled() {
        return this.pRowTogglerDisabled !== true;
    }
}

标签： javascriptangularprimengangular-directive

解决方案

不确定这是否是最好的方法，但我最终只是在行展开时禁用了 pRowToggler：

    <div
        [pRowToggler]="rowData"
        [pRowTogglerDisabled]="expanded"
        [ngClass]=" !expanded ? 'fake-link' : ''"
    >
    Open Me
    </div>

推荐阅读