是否可以将输入属性 [columns] 与 ngx-datatable-column 指令一起使用？

Question

所以我正在为我的应用程序中的表格开发一项功能。我已经对 ngx-datatable 作为一个组件进行了抽象，该组件充当我应用程序中其他组件的外观（someComponent => FacadeTableComponent => Ngx-DataTable）。

列是基于 someComponent 在 FacadeTableComponent 中创建的，并作为输入传递给 NgxDataTable。

但现在我想向数据表添加一个树视图（有效），但我希望 FacadeTableComponent 设置一个默认的第一列，其中包含一个按钮，该按钮可以折叠/展开树。所以我认为可以在 FacadeTableComponent html 模板中将默认列定义为 ngx-datatable-column。问题似乎是输入列似乎覆盖了我的默认列。

现在我尝试以某种方式使用 @ViewChild 获取 ngx-datatable-column 并将其取消转移到 FacadeTableComponent 中生成的列，但我无法将其作为指令而不是作为 ElementRef 来获取。

我当然可以在 .ts 文件中定义一个默认列，并在生成其余列时生成它，但我想知道是否可以按照我在标题中描述的方式进行操作。

这个默认列的原因是当我将现有的列之一设置为treeView列时，ngx数据表添加了一个默认按钮，即使我为单元格提供了自己的模板，并且我想提供自己的模板中的按钮。

<ngx-datatable #ngxDataTable class="datatable" [rows]="collection" [columnMode]="columnMode"
        [footerHeight]="footerHeight" [selectionType]="selectionType" [sortType]="sortType" [sorts]="sorts"
        [rowIdentity]="rowIdentity" [messages]="tableMessages" [selected]="selectedRows" [columns]="columns"
        [headerHeight]="headerHeight" [rowHeight]="rowHeight" [scrollbarV]="true" [scrollbarH]="true"
        (select)="onSelect($event)" (activate)="onActive($event)" [externalSorting]="true" [rowClass]="rowCssClass"
        [sortType]="'single'" [treeFromRelation]="'MasterId'" [treeToRelation]="'id'"
        (treeAction)="onTreeAction($event)" (sort)="sortRows($event)" (resize)="resizeTriggered($event)"> 

        <!-- Datatable tree view column -->
        <ngx-datatable-column #column_tree_view name="Tree" [isTreeColumn]="true" [width]="150"
            [treeLevelIndent]="20">
            <ng-template ngx-datatable-tree-toggle let-tree="cellContext">
                <button [disabled]="tree.treeStatus==='disabled'" (click)="tree.onTreeAction()">
                    <span *ngIf="tree.treeStatus==='loading'">
                        ...
                    </span>
                    <span *ngIf="tree.treeStatus==='collapsed'">
                        ↑
                    </span>
                    <span *ngIf="tree.treeStatus==='expanded'">
                        ↓
                    </span>
                    <span *ngIf="tree.treeStatus==='disabled'">
                        ⃠
                    </span>
                </button>
            </ng-template>
        </ngx-datatable-column>
<ngx-datatable>

Answer 1

如果有人踩到这个问题，我已经解决了：

首先我们在 FacadeTableComponent 的 html 上定义一个 ng-template：

<ng-template #treeTemplate let-row="row">
<div *ngIf="row.IsTreeColumn" class="tree-cell">
    <ng-container *ngTemplateOutlet="treeColumnTemplate; context: {row : row}"></ng-container>
    <p-button (click)="onTreeAction(row)">
        <span *ngIf="row.treeStatus==='collapsed'">
            ↑
        </span>
        <span *ngIf="row.treeStatus==='expanded'">
            ↓
        </span>
    </p-button>
</div>

之后我只是用指令 viewChild 抓取模板，定义一个 prop 值为 '_treeColumnName' 的列，它作为 Facade 的输入提供，然后将其移至列数组：

@ViewChild('treeTemplate') private _treeViewTemplate: TemplateRef<any>;


private createTreeViewColumn(): void {
    const column: TableColumn= {
        name: this._treeColumnName,
        prop: this._treeColumnName,
    } as TableColumn;

    if (this.columns.findIndex((tablecolumn: TableColumn) => tablecolumn.prop === this._treeColumnName) === -1) {
        // the isTreeColumn is not included in the TableColumn, therefore a cast is needed
        const tablecolumn = column as TableColumn;
        tablecolumn.isTreeColumn = true;
        this.columns.unshift(tablecolumn);
    }
}

private removeTreeViewColumn(): void {
    const treecolumnindex = this.columns.findIndex((tablecolumn: TableColumn) => tablecolumn.prop === this._treeColumnName);
    if (treecolumnindex !== -1) {
        this.columns.splice(treecolumnindex, 1);
    }
}

最后我只是将实现添加到展开/折叠功能中：

    private readonly _treeStatusCollapsed: string = 'collapsed';
    private readonly _treeStatusExpanded: string = 'expanded';

    ... 

    /** Expands or collapses a tree view row
     */
    public onTreeAction(event: any): void {
        const row = event;
        if (row.treeStatus === this._treeStatusCollapsed) {
            row.treeStatus = this._treeStatusExpanded;
        } else {
            row.treeStatus = this._treeStatusCollapsed;
        }
            // trigger a change detection
            this.rows= [...this.rows];
            this._changeDetectorRef.detectChanges();
        }

就是这样，就像一个魅力。当然可以提供任何它想要的模板，或者通过 css 类更改图标。