标签: ngx-datatable

在这里，我正在尝试使用 ngx-datatable 显示动态生成的表，但我尝试显示的是奇数行，我想显示一种颜色，偶数行我尝试应用第 n 个元素 &

body .datatable-body-row .datatable-row-even {
    background: orange;
}



body datatable-body-row .datatable-row-odd {
    background: aqua;
   } 



   .ngx-datatable.bootstrap .datatable-body .datatable-body-row.datatable-row-even {
    background-color: red;
}

我尝试了所有这些来为奇数行或偶数行设置行颜色，但这些样式不适用

<ngx-datatable-column [width]="24"
                                  [sortable]="true"
                                  [canAutoResize]="false"
                                  [draggable]="false"
                                  [resizeable]="false"
                                  [headerCheckboxable]="true"
                                  [checkboxable]="true">
            </ngx-datatable-column>
            <ngx-datatable-column name='Name' prop='formattedStudentName' [width]="400" [cellClass]="'se-list-item'">
                <ng-template let-column="column" ngx-datatable-header-template>
                    <ng-container>
                        <div ngbTooltip="Click on the word 'Name' to change the sort direction of the student list">
                            {{column.name}}
                        </div>
                    </ng-container>
                </ng-template>
                <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
                    <div>
                        <a href="#" (click)="!!onNameClicked(row)">{{value}}</a>
                    </div>
                </ng-template>
                </ngx-datatable-column>

这是我的代码的一部分。我需要对列标题使用 ngbTooltip，它可以工作，但是当我悬停时，气泡会被数据表截断。我怎样才能防止它被切断？

我有一个带有scss样式扩展的Angular项目

angular.json

"schematics": {
    "@schematics/angular:component": {
        "styleext": "scss"
    }
},...

然后，我有一个需要在主题中使用ngx-datatable的组件，因此我导入了css文件

result.component.ts

@Component({
  providers: [HintService],
  selector: 'app-result',
  styleUrls: [
    'result.component.scss',
    '../../../../../node_modules/@swimlane/ngx-datatable/release/index.css',
    '../../../../../node_modules/@swimlane/ngx-datatable/release/themes/material.css',
    '../../../../../node_modules/@swimlane/ngx-datatable/release/themes/bootstrap.css',
    '../../../../../node_modules/@swimlane/ngx-datatable/release/assets/icons.css'
  ],
  templateUrl: 'result.component.html'
})

使用此代码，我无法使主题正常工作。而且我没有任何错误。在阅读类似问题之后，我尝试了此操作在SCSS文件中导入常规CSS文件

result.component.scss

@import "../../../_custom.scss";
@import "~node_modules/@swimlane/ngx-datatable/release/index";
@import "~node_modules/@swimlane/ngx-datatable/release/themes/material";
@import "~node_modules/@swimlane/ngx-datatable/release/themes/bootstrap";
@import "~node_modules/@swimlane/ngx-datatable/release/assets/icons";

但是在这种情况下，ngx-datatables css中字体的路径变得混乱

ERROR in ./src/app/menu/transaction/result/result.component.scss
(Emitted value instead of an instance of Error) CssSyntaxError: C:\TeamProjects\Web\Dev\Portal\node_modules\@swimlane\ngx-datatable\release\assets\icons.css:9:4: Can't resolve 'fonts/data-table.svg' in 'C:\Projects\Web\Dev\Portal\src\app\menu\transaction\result'

（字体当然就位了，我没有碰过ngx的css文件）

我没有主意...。有人可以为我指出正确的方向吗？

PD：对不起我的英语

我在显示数据表页脚时遇到问题，并且无法在线找到有效的解决方案。我尝试了很多解决方案，包括：ngx-datatable-footer does not work in Angular Aplication和 this：ngx-datatable footer custom以及 SO 之外的许多其他解决方案，但没有一个有效。我过去有时在另一个项目中使用与下面的页脚非常相似的页脚成功地实现了这一点，甚至复制了精确的页脚但没有成功。关于如何让它发挥作用有什么想法吗？

<ngx-datatable-footer #tFooter (onFooterPage)="handleF($event)">
   <ng-template ngx-datatable-footer-template let-rowCount="rowCount" let-pageSize="pageSize" let-selectedCount="selectedCount" let-curPage="curPage" let-offset="offset">
      <span class="pl-3 text-primary">SHOWING:</span>&nbsp;&nbsp;<span class="text-muted text-sm"> {{curPage > 1 ? (curPage * pageSize) - pageSize : curPage}} - {{(pageSize * curPage) < rowCount ? pageSize * curPage : rowCount}} of {{rowCount}}</span>
      <datatable-pager (onFooterPage)="handleF($event)" (change)="table.onFooterPage($event)" [pagerLeftArrowIcon]="'datatable-icon-left'" [pagerRightArrowIcon]="'datatable-icon-right'" [pagerPreviousIcon]="'datatable-icon-prev'" [pagerNextIcon]="'datatable-icon-skip'" [page]="curPage" [size]="pageSize" [count]="rowCount">
     </datatable-pager>
   </ng-template>
</ngx-datatable-footer>