Angular 是否可以将输入属性[columns]与ngx datatable column指令一起使用?
因此,我正在为我的应用程序中的表开发一个功能。我已经将ngx数据表抽象为一个组件,作为我应用程序中其他组件的门面(someComponent=>FacadeTableComponent=>ngx数据表) 这些列是基于someComponent在FacadeTableComponent中创建的,并作为输入传递给NgxDataTable 但是现在我想向datatable添加一个树视图(可以工作),但是我想让FacadeTableComponent设置一个默认的第一列,并使用一个按钮来进行树的折叠/扩展。因此,我认为默认列可以定义为FacadeTableComponent html模板中的ngx datatable列。问题是输入列似乎覆盖了我的默认列 现在,我试图以某种方式获取带有@ViewChild的ngx datatable列,并将其取消移动到FacadeTableComponent中生成的列,但我无法将其作为指令而不是ElementRef来获取 当然,我可以在.ts文件中定义一个默认列,并在生成其余列时生成它,但我想知道是否有可能按照我在标题中描述的方式进行 此默认列的原因是,当我将一个现有列设置为treeView列时,ngx datatable会添加一个默认按钮,即使我向单元格提供我自己的模板,并且我希望在模板中提供我自己的按钮Angular 是否可以将输入属性[columns]与ngx datatable column指令一起使用?,angular,typescript,ngx-datatable,Angular,Typescript,Ngx Datatable,因此,我正在为我的应用程序中的表开发一个功能。我已经将ngx数据表抽象为一个组件,作为我应用程序中其他组件的门面(someComponent=>FacadeTableComponent=>ngx数据表) 这些列是基于someComponent在FacadeTableComponent中创建的,并作为输入传递给NgxDataTable 但是现在我想向datatable添加一个树视图(可以工作),但是我想让FacadeTableComponent设置一个默认的第一列,并使用一个按钮来进行树的折叠/扩
<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>
...
↑
↓
⃠
如果有人在这个问题上跺脚,我已经解决了:
首先,我们在FacadeTableComponent的html上定义ng模板:
<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>
就是这样,它就像一个符咒。当然,你可以提供任何它想要的模板,或者通过css类更改图标。如果有人在这个问题上跺脚,我已经解决了这个问题: 首先,我们在FacadeTableComponent的html上定义ng模板:
<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>
就是这样,它就像一个符咒。当然,用户可以提供所需的任何模板,或者通过css类更改图标。我看到您使用了
ngx数据表列
。我找不到任何定义,也找不到它是什么。你能告诉我在哪里可以学到更多关于它的知识吗?谢谢。我看到您使用了ngx数据表列
。我找不到任何定义,也找不到它是什么。你能告诉我在哪里可以学到更多关于它的知识吗?非常感谢。
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();
}