Я работал в Angular как новичок. В базе данных есть таблицы, и я получаю их на стороне API. Клиентская часть, разработанная с помощью Angular, вызывает API и отображает данные в таблице. Таблица является таблицей материалов, нумерация страниц не выполняется. Просто простой прокручиваемый стол. Проблема в том, что когда объем данных огромен, например, 1600 строк, таблица загружается очень очень медленно. Даже прокрутка иногда застревает. В этом отношении приветствуются любые предложения экспертов.
Вот мой html фрагмент кода:
<div class="section">
<button class="btn btn-primary" (click)=download() *ngIf="exportButtonVisibility" >Export Data</button>
<div class="example-container mat-elevation-z8">
<div class="spinner-container">
<mat-spinner id="spinner" *ngIf="spinnerVisibility"></mat-spinner>
</div>
<table mat-table id="excel-table" class="table table-bordered table-hover table-condensed">
<thead>
<tr mat-header-row >
<th *ngFor="let head of rawDatas[0] | keys" >{{head}}</th>
</tr>
</thead>
<tbody striped="true">
<tr mat-row *ngFor="let item of rawDatas">
<td *ngFor="let data of item | keys ;">{{item[data]}}</td>
</tr>
</tbody>
</table>
</div>
</div>
А вот код машинописи:
getDataInfo(value: any) {
//debugger;
this.loading = true;
//let spinner = document.getElementById('spinner');
this.spinnerVisibility = true;
this.exportButtonVisibility = false;
this.rawDataHeaders= empty;
this.rawDatas =[];
console.log('schema', this.schema);
//console.log("server address", localStorage.getItem("serverAddress"));
let dbName = localStorage.getItem("selecltedDb");
//localStorage.setItem('tableName',value.schema_name);
let tableName =localStorage.getItem("tableName");
console.log(tableName);
let dbServerAddress = localStorage.getItem("serverAddress");
let dbServerPort = localStorage.getItem("serverPort");
let dbLoginId = localStorage.getItem("databaseLoginId");
let dbLoginPassword = localStorage.getItem("dbpassword");
this.dashboardService.GetTableData(dbName, tableName, dbServerAddress, dbServerPort, dbLoginId, dbLoginPassword)
.subscribe((data: any) => {
console.log(data);
//console.log("server address", value.serverAddress);
this.loading=false;
this.exportButtonVisibility=true;
if (data != null) {
localStorage.setItem('selecltedTbl', value.schema_name);
this.rawDatas = data;
this.rawDataHeaders = Object.keys(data[0]);
}
this.spinnerVisibility = false;
},
(error: any) => {
console.log(error);
}
);
}
Заранее благодарим за помощь в этом вопросе.