Question

我已经在Angular中创建了一个数据表组件，该组件将配置表的配置对象作为输入，并根据这些配置显示表。

我的组件在2种模式下工作： 1.您可以提供数据作为配置文件的一部分以显示在表中。 2.您可以提供配置了分页响应的API URL，以便使数据表可以直接从具有分页的后端显示数据。

我的组件需要输入的配置文件格式：

export interface DataTableConfig {
    remove?: action;
    more?: action;
    data?: Array<any>;
    pageSize?: number;
    ajax?: {
        URL: string;
        headers: HttpHeaders;
        pathToProperty: string;
        firstPage?: number;
    };
    columns: Array<column>;
}

interface column {
    title: string;
    data: string;
    width?: string;
    responsivePriority?: number;
    dateFormat?: String;
    orderable?: boolean;
    class?: string;
    icon?: {
        iconName: string;
        isTrue?: string;
        color?: string;
    };
}

我遇到的问题是我希望表的某些列被隐藏（无类），并且当用户按下（+）按钮以显示隐藏的信息时。

我是在使用数据表（提供的数据）的第一种模式下完成此操作的，但是在第二种情况下，当我从页面的后端获取数据时，列的响应能力就消失了。我不明白为什么。

我在下面提供我的html代码和数据表的配置对象的构造。有人知道解决方案吗？

HTML代码

<ng-container *ngIf="dtOptions">
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
<tbody>
  <ng-container *ngFor="let element of configuration.data">
    <tr>
      <ng-container *ngFor="let column of configuration.columns">
        <ng-container *ngIf="column.data && column.title && !column.dateFormat">
          <td>
            <div class="align-icon-text">
              <ng-container *ngIf="column.icon">
                <mat-icon [style.color]="column.icon.color" class="icon" *ngIf="showIcon(element,column)">
                  {{column.icon.iconName}}</mat-icon>
              </ng-container>
              <span *ngIf="column.data">{{showValue(element, column.data)}}</span>
            </div>
          </td>
        </ng-container>
        <ng-container *ngIf="column.data && column.title && column.dateFormat">
          <td>
            <div class="align-icon-text">
              <ng-container *ngIf="column.icon">
                <mat-icon [style.color]="column.icon.color" class="icon" *ngIf="showIcon(element,column)">
                  {{column.icon.iconName}}</mat-icon>
              </ng-container>
              <span *ngIf="column.data">{{showValue(element, column.data) | date: column.dateFormat}}</span>
            </div>
          </td>
        </ng-container>

        <td (click)="deleteRow(element)" *ngIf="configuration.remove && column.data=='remove' && !column.title"
          matTooltip="{{configuration.remove.tooltip}}">
          <button mat-icon-button>
            <mat-icon>{{configuration.remove.icon}}</mat-icon>
          </button>
        </td>
        <td (click)="showMore(element)" *ngIf="configuration.more && column.data=='more' && !column.title"
          matTooltip="{{configuration.more.tooltip}}">
          <button mat-icon-button>
            <mat-icon>{{configuration.more.icon}}</mat-icon>
          </button>
        </td>
      </ng-container>
    </tr>
  </ng-container>
</tbody>
<tbody *ngIf="configuration.data?.length == 0">
  <tr style="width: 100% !important">
    <td class="no-data-available" [attr.colspan]="numberOfColumns">No data available</td>
  </tr>
</tbody>

dtOptions的构造

    var pageSize = this.configuration.pageSize || 10;
if (this.configuration.ajax) {
  this.dtOptions = {
    // processing: true,
    ajax: (dtParameters: any, callback) => {
      var URL = this.configuration.ajax.URL;
      if (this.configuration.ajax) {
        var currentPage = (parseInt(dtParameters['start']) + parseInt(dtParameters['length'])) / pageSize;
        URL = `${URL}?page=${currentPage - 1}&pageSize=${pageSize}`
      }
      this.crud.get(URL, this.configuration.ajax.headers).subscribe((res) => {
        this.configuration.data = this.getObjectByPath(res);
        callback({
          recordsTotal: res['paging']['total'],
          recordsFiltered: res['paging']['total'],
          data: []
        })
      })
    },
    dom: 'Bfrtip',
    bLengthChange: false,
    bFilter: true,
    bInfo: false,
    bAutoWidth: false,
    pageLength: pageSize,
    order: [],
    serverSide: true,
    pagingType: 'full_numbers',
    columns: this.configuration.columns,
    responsive: true,
    language: {
      search: 'Filter: '
    },
    buttons: [
      {
        extend: 'print',
        exportOptions: {
          columns: "thead th:not(.noExport)"
        }
      },
      {
        extend: 'excel',
        exportOptions: {
          columns: "thead th:not(.noExport)"
        }
      },
      {
        extend: 'csv',
        exportOptions: {
          columns: "thead th:not(.noExport)"
        }
      }
    ]
  };
} else if (this.configuration.data) {
  if (typeof this.configuration.data === 'object' && !(this.configuration.data instanceof Array)) {
    this.configuration.data = [this.configuration.data];
  }
  this.dtOptions = {
    bLengthChange: false,
    bFilter: true,
    bInfo: false,
    bAutoWidth: false,
    pageLength: pageSize,
    order: [],
    dom: 'Bfrtip',
    pagingType: 'full_numbers',
    columns: this.configuration.columns,
    responsive: true,
    language: {
      search: 'Filter: '
    },
    buttons: [
      {
        extend: 'print',
        exportOptions: {
          columns: "thead th:not(.noExport)"
        }
      },
      {
        extend: 'excel',
        exportOptions: {
          columns: "thead th:not(.noExport)"
        }
      },
      {
        extend: 'csv',
        exportOptions: {
          columns: "thead th:not(.noExport)"
        }
      }
    ]
  };
}

当前问题

预期行为

Answer 1

我有类似的问题，因为我有一些想搜索但不显示的列。

您需要对该列使用“ visible：false”，如果要显示它们，则不对其应用可见性。

this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
  dtInstance.column(columnIndex).visible(true or false);
});

从后端获取数据时，Angular 7中的数据表组件具有响应性问题

1 个答案: