ngx-pagination - рендеринг страницы очень медленный - html


0

Я пытаюсь создать приложение, используя Nodejs, Angular 6 и SQL. В моей базе данных более 80 000 элементов, и когда я пытаюсь разбить на страницы, используя ngx-pagination, он работает очень медленно (get из базы данных происходит за 15 секунд, но страница отображается более чем за 1,5 минуты)

Здесь у вас есть фрагмент моего кода:

.html

<table>
    <thead>
    ...
    </thead>
    <tbody>
        <tr *ngFor="let ded of filteredArray | orderBy : key : reverse | { itemsPerPage: crtPage, currentPage: p, totalItems: itemsLength() }"
            <td>{{ ded.name }}</td>
            <td>{{ ded.group }}</td>
            <td>{{ ded.age }}</td>
        <tr>

    </tbody>

    <div class="hint-text">
        <span>
            Showing {{ itemsLength() }} entries.
        </span>
    </div>

<table>

.ts

ngOnInit() {
    this.refreshItemsList()
}

refreshItemsList() {
    this.dedService.getNNItems().subscribe((res) => {
      this.extractItems(res)
    });
}

extractItems(res) {
    this.filteredArray = res
}

itemsLength() {
    return this.filteredArray.length
}

Что я могу сделать, чтобы быстрее отображать элементы? Спасибо.

Источник
  •  45
  •  1
  • 3 май 2020 2020-05-03 14:24:07

1 ответ

1

Так что, если вы пытаетесь получить 80k элементов и страницу клиента, это не очень хороший подход. Он использует много памяти и вычислительной мощности, каждый раз, когда вы обновляете.

Взгляните на подкачку на стороне сервера: https://www.npmjs.com/package/ngx-pagination#server-side-paging


На стороне Nodejs вы можете разбивать свои результаты на что-то вроде этого:

var query = "Select * from ?? DESC limit ? OFFSET ?";

//Mention table from where you want to fetch records example-users & send limit and start 

var table = ["your table",LimitNum,startNum];
query = mysql.format(query, table);
connection.query(query, function(err, rest) {
 if(err){
  res.json(err);
}
else{
// Total Count varibale display total Count in Db and data display the records
   res.json("Total Count": totalCount , "data":rest)
}

Источник

  • 3 май 2020 2020-05-03 14:24:08