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

问题描述 投票:1回答:1

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

这些列是在FacadeTableComponent中基于someComponent创建的,并作为输入传递给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>

所以我正在为我的应用程序中的表格开发功能。我已经对ngx-datatable作了一个抽象,将其作为我的应用程序中其他组件的外观(someComponent => ...

angular typescript ngx-datatable
1个回答
0
投票

[如果有人对这个问题之以鼻,我已经解决了:

© www.soinside.com 2019 - 2024. All rights reserved.