Можно ли использовать свойство input [columns] вместе с директивой ngx-datatable-column? - PullRequest
Новая
       19

Можно ли использовать свойство input [columns] вместе с директивой ngx-datatable-column?

0 голосов
/ 08 июля 2019

Итак, я работаю над функцией для таблицы в моем приложении. Я сделал абстракцию над ngx-datatable как компонентом, который действует как фасад для других компонентов в моем приложении (someComponent => FacadeTableComponent => Ngx-DataTable).

Столбцы создаются в FacadeTableComponent на основе someComponent и передаются в качестве входных данных в NgxDataTable.

Но теперь я хочу добавить древовидное представление в таблицу данных (это работает), но я хочу, чтобы FacadeTableComponent установил первый столбец по умолчанию с кнопкой, которая выполняет свертывание / развертывание дерева. Поэтому я подумал, что столбец по умолчанию можно определить как ngx-datatable-column в HTML-шаблоне FacadeTableComponent. Кажется, проблема в том, что входные столбцы перезаписывают мой столбец по умолчанию.

Теперь я попытался каким-то образом захватить столбец ngx-datatable-столбца с помощью @ViewChild и снять его с сгенерированными столбцами в 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>
...