Angular Таблица данных материала без нумерации страниц загружается очень медленно - PullRequest
0 голосов
/ 28 января 2020

Я работал в 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);
        }
      );

      
  }

Заранее благодарим за помощь в этом вопросе.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...