Я создал компонент таблицы данных в Angular, который принимает в качестве входных данных объект конфигурации, который устанавливает таблицу и отображает таблицу на основе этих конфигураций.
Мой компонент работает в2 режима: 1. Вы можете предоставить данные как часть файла конфигурации для отображения в таблице.2. Вы можете предоставить URL-адрес API, настроенный с ответами на пейджинг, чтобы сделать данные доступными для отображения данных непосредственно из бэкэнда с пейджингом.
Формат файла конфигурации, который нужен моему компоненту в качестве ввода:
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)"
}
}
]
};
}
Текущая проблема 
Ожидаемое поведение 