ngx-datatable 相关问题

有关Angular 2+的ngx-datatable包的问题,​​请使用此选项

如何更改ngx数据表标题背景颜色?

我想将表格标题背景设置为蓝色。 这是我的html: 我想将表格标题背景设置为蓝色。 这是我的html: <ngx-datatable class="material" [rows]="rows" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'" ngClass="{'table-striped': false}"> <ngx-datatable-column name="ID RECLAMO" prop="idReclamo" class="bg-dark"></ngx-datatable-column> <ngx-datatable-column name="SEGNALTO" prop="dataSegnalizione"> <ng-template let-row="row" ngx-datatable-cell-template> {{ row.dataSegnalizione | date:'dd/MM/yyyy' }} </ng-template> </ngx-datatable-column> <ngx-datatable-column name="PRESO IN CARICO IL" prop="dataPresoInCarico"> <ng-template let-row="row" ngx-datatable-cell-template> {{ row.dataChiusura | date:'dd/MM/yyyy' }} </ng-template> </ngx-datatable-column> <ngx-datatable-column name="CHIUSO IL" prop="dataChiusura"> <ng-template let-row="row" ngx-datatable-cell-template> {{ row.dataPresoInCarico | date:'dd/MM/yyyy' }} </ng-template> </ngx-datatable-column> <ngx-datatable-column name="NEGOZIO" prop="codiceNegozio"></ngx-datatable-column> <ngx-datatable-column name="MANAGER" prop="manager"></ngx-datatable-column> <ngx-datatable-column name="CLIENTE" prop="cliente"></ngx-datatable-column> <ngx-datatable-column name="STATO" prop="stato"></ngx-datatable-column> <ngx-datatable-column name="GESTIONE" prop="gestione"></ngx-datatable-column> <ngx-datatable-column name="CAUSALE RECLAMO" prop="causaleReclamo"></ngx-datatable-column> <ngx-datatable-column name="SODDISFAZIONE" prop="soddisfazione"></ngx-datatable-column> </ngx-datatable> 我尝试使用“深层”“主机”强制它,但没有结果。 尝试下面的CSS .ngx-datatable ::ng-deep .datatable-header-inner{ background-color: blue !important; } .ngx-datatable ::ng-deep .datatable-header-inner .datatable-header-cell-label, .ngx-datatable ::ng-deep .datatable-header-inner .sort-btn{ color: white !important; } Stackblitz 演示 如果您使用css,您需要在css文件中添加以下样式。 /deep/ .ngx-datatable .datatable-header { background-color: blue; } 如果您使用scss,您需要在scss文件中添加以下样式。 ::ng-deep { .ngx-datatable { &.datatable-header { background-color: red; } } } 请检查这个stackblitz。 致以诚挚的问候。

回答 2 投票 0

如何向 ngx-datatable 中的行添加动画?

我想以堆叠方式显示数据表(ngx)的行:一行接着另一行。 我想添加[@datatableAnimation]。但我不知道在哪里添加它。 当我将其添加到 我想以堆叠方式显示数据表 (ngx) 的行:一行接着另一行。 我想补充[@datatableAnimation]。但我不知道在哪里添加它。 当我将其添加到 <ngx-datatable [@datatableAnimation]> 时,它仅适用于页眉和页脚 <ngx-datatable #table [rows]="rows" [columns]="columns" class="bootstrap" [columnMode]="ColumnMode.force" [footerHeight]="50" rowHeight="auto" [count]="totalItems" [externalPaging]="true" [externalSorting]="true" [limit]="nbItemPerPage" [messages]="{emptyMessage: emptyMessage}" [sorts]="[{prop: 'SendAt', dir: 'desc'}]" (sort)="onSort($event)" > <ngx-datatable-column name="Date" prop="SendAt" [maxWidth]="200"> <ng-template let-column="column" ngx-datatable-header-template>{{ column.name }}</ng-template> <ng-template let-row="row" ngx-datatable-cell-template> {{ row.SendAt }} </ng-template> </ngx-datatable-column> //... 谢谢 我搜索了文档,但找不到有关此主题的部分。 你需要使用Angular的动画功能。您可以在组件的 TypeScript 文件中为动画定义触发器,然后将该触发器应用于 HTML 文件中的 ngx-datatable。 在组件的 TypeScript 文件中定义动画。 import { trigger, state, style, animate, transition } from '@angular/animations'; @Component({ selector: 'your-component', templateUrl: './your-component.component.html', styleUrls: ['./your-component.component.css'], animations: [ trigger('datatableAnimation', [ transition(':enter', [ style({ opacity: 0, transform: 'translateY(-20px)' }), animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })), ]), ]), ], }) 将动画应用于 ngx-datatable-row 元素。 <ngx-datatable #table [rows]="rows" [columns]="columns" class="bootstrap" [columnMode]="ColumnMode.force" [footerHeight]="50" rowHeight="auto" [count]="totalItems" [externalPaging]="true" [externalSorting]="true" [limit]="nbItemPerPage" [messages]="{emptyMessage: emptyMessage}" [sorts]="[{prop: 'SendAt', dir: 'desc'}]" (sort)="onSort($event)" > <ngx-datatable-column name="Date" prop="SendAt" [maxWidth]="200"> <ng-template let-column="column" ngx-datatable-header-template>{{ column.name }}</ng-template> <ng-template let-row="row" ngx-datatable-cell-template> {{ row.SendAt }} </ng-template> </ngx-datatable-column> <!-- Apply animation to ngx-datatable-row --> <ngx-datatable-row *ngx-datatable-row="let row; columns: columns;" [@datatableAnimation]></ngx-datatable-row> </ngx-datatable>

回答 1 投票 0

错误:无法解析“组件”中的“~@swimlane/ngx-datatable/index.css”

将 Angular 项目从 v14 迁移到 v15 后,它会对使用 @swimlane/ngx-datatable 的组件抛出以下错误: 'component'.component.scss?ngResource - 错误:模块构建失败(来自 ./

回答 1 投票 0

如果ngx-datatable不存在子项,如何删除展开按钮

我使用以下代码在 ngx-datatable 中生成树视图: HTML: 我使用以下代码在 ngx-datatable 中生成树视图: HTML: <ngx-datatable [rows]="rows" class="material" [loadingIndicator]="false" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'" [columns]="columns" [rowClass]="getRowClass" [reorderable]="reorderable" [treeFromRelation]="'manager'" [treeToRelation]="'id'" [rows]="rows" (treeAction)="onTreeAction($event)" > <ngx-datatable-column name="name" [flexGrow]="3" [isTreeColumn]="true"> <ng-template let-value="value" ngx-datatable-cell-template> {{ value }} </ng-template> </ngx-datatable-column> <ngx-datatable-column name="gender" [flexGrow]="3"> <ng-template let-value="value" ngx-datatable-cell-template> {{ value }} </ng-template> </ngx-datatable-column> </ngx-datatable> TS: import { Component, VERSION } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { name = 'Angular ' + VERSION.major; reorderable: boolean = true; loadingIndicator: boolean = true; rows = [ { id: 1, name: 'Austin', gender: 'Male', company: 'Swimlane', }, { id: 2, name: 'Dany', gender: 'Male', company: 'KFC' }, { id: 3, name: 'Molly', gender: 'Female', company: 'Burger King', manager: 1, class: 'child-row-file', }, ]; columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }]; onTreeAction(event: any) { console.log('toggle'); const index = event.rowIndex; const row = event.row; if (row.treeStatus === 'collapsed') { row.treeStatus = 'expanded'; } else { row.treeStatus = 'collapsed'; } this.rows = [...this.rows]; } getRowClass(event) { console.log(event); if (event.class) { if (event.class == 'child-row-file') return { 'child-row-file': true, }; } } } 代码工作正常,我能够生成树视图。 运行示例 问题: 因为,您可以检查第二个父级没有子级,但它仍然显示展开按钮。如果没有孩子在场,我如何删除此按钮。 我目前正在寻找相同的东西。你解决这个问题了吗?

回答 1 投票 0

Angular - ngx-datatable 水平滚动问题

我正在使用 Angular 和 ngx-datable 来显示动态列表。 左前两列是固定的,并且出现水平滚动条(这就是我想要的)。 问题是当我在屏幕上...

回答 1 投票 0

排序后如何获取ngx-datatable中更新的排序项

我正在使用 Swimlane/ngx-datatable 库来显示列表。在每一行的列表中,我动态添加带有项目的操作菜单(当单击图标时,菜单将显示为弹出窗口)。 问题:...

回答 1 投票 0

自定义 ngx-datatable pager 组件以显示文本而不是图标并添加 totalVisible 属性?

我正在自定义 ngx-dataTable 中的数据表寻呼机,可以添加页脚和寻呼机。我只有两个问题如下 - 对于上一个/下一个/第一个和最后一个按钮,如何显示文本而不是...

回答 2 投票 0

突出显示 ngx-datable 中的最新行

我们有一个使用 ngx-datatable 在角度应用程序中创建的表。我希望动态突出显示最新行 2 秒。我们怎样才能做到这一点。下面是已经尝试过的代码。 <...

回答 0 投票 0

如何提高 ngx-datatable 的性能

我在我的角度项目中使用 ngx-datatable 来显示数据。 数据大小为 4000 多行和 50 列。 我怎样才能使它轻量级因为页面性能太慢了。 请给我任何建议...

回答 0 投票 0

如何在 Angular 8 中使用 scrollbarV = True 显示页脚?

我正在使用 ngx-datatable 来显示数据。我需要限制数据表的高度并显示垂直滚动条。下面是我的表配置 我试着限制...

回答 1 投票 0

如何在ngx-datable ngx-datable-column中使用排序?

我试图使用ngx-datable的排序功能来执行这样的操作链接:https:/swimlane.github.iongx-datable然而,它没有工作。我试过使用属性,但不成功......。

回答 1 投票 0

ngx-datable 不能在环境上下文中声明访问器。

当我试图将ngx-datable添加到我的ionic + angular项目中时,我遇到了一个错误。我收到了很多错误行,而且似乎没有将ngx-database添加到我的项目中。我是...

回答 1 投票 0

如何使用ngx-datable动态删除和编辑一条记录。

我已经尝试了几天在删除一行后动态更新ngx-datable数组,但没有成功。目前只有在鼠标悬停在表上后才会更新,这 ...

回答 1 投票 0

在ngx-datable中对列进行重新排序。

我有两个需求。第一个需求是用动态列显示表格。我能够实现这个需求。第二个需求是允许用户重新排序列并保存为他们的 ...

回答 1 投票 1

在插入项目上刷新数据

我是个新手,我用的是ngx-datable。我正在使用ngx-datable。有没有办法刷新ngx-datable的UI视图。比如重新渲染所有的东西,请看截图。谢谢,pOng

回答 1 投票 0

在ngx-datable列中使用angular组件。

我在我的应用程序中使用了很多ngx-datable,我想为列和它们各自的标题提供一些通用模板。现在我有

回答 1 投票 0

需要为许多属性中的特定属性应用管道

我正在从API接收18个属性,我需要为两个属性值应用日期管道。我如何在18个属性中的.ts文件中应用。在下面的代码中,返回{prop:i,index:...

回答 1 投票 0

Angular Universal and ngx-table configuration

我正在尝试将一些旧的应用程序转换为Angular Universal,并且在ngx-datable的配置与服务器端渲染一起工作时遇到问题。我遵循官方指导如何...

回答 1 投票 0

Angular ngx-datatable row-detail issues

我在ngx-datatable中使用行详细信息时遇到两个问题。 rowIndex不起作用。我发现了一个描述问题的github问题,但据认为已在10.0.2版中修复,我正在使用11.1.5 ...

回答 1 投票 5

在使用ngx-datatable而不工作旋钮的组件的Storybook故事之间切换时发生ViewDestroyedError

我在故事书中遇到了一些困难。显示以下错误:core.js:19641未捕获的错误:ViewDestroyedError:尝试使用被破坏的视图:detectChanges at ...

回答 1 投票 0

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