Таблица показывает только 50 записей - PullRequest
0 голосов
/ 12 июня 2018

Моя таблица имеет нумерацию страниц для отображения 13 элементов на странице.

Предположим, что я создаю нового «пользователя», и у меня есть специальный модал для создания пользователя, где я могу заполнить все данные.После создания пользователя самая основная информация о пользователе отображается в таблице Имя, адрес, адрес электронной почты и телефон.

Теперь, если я создаю 50 пользователей, они правильно отображаются в моей таблице, и моя нумерация страниц работает отлично.,Если я создам более 50 пользователей.Мой 51-й и любой пользователь, идущий вперед с номера 50, вообще не отображается в таблице!

Я проверил свою базу данных, и запись успешно создана в POSTGRES TABLE .. для 51-го, 52-го бла-бла, но нетданные в HTML ТАБЛИЦА

Не могли бы вы проверить, где ошибка в коде.(Я не думаю, что разбиение на страницы является проблемой, так как, когда я увеличиваю его до 100 элементов на странице, он ничего не делает)

<div class="row" style="margin-top:50px;margin-left:15px;">
   <div class="card-body">
      <div class="row">
         <div class="table-col">
            <div class="card table">
               <div class="row header">
                  <div class="col col-md-6">Name</div>
                  <div class="col col-md-2">Email</div>
                  <div class="col col-md-2">Address</div>
                  <div class="col col-md-2">Phone</div>
               </div>
               <div *ngFor="let group of users">
                  <div *ngIf="group.name == 'all'">
                     <div class="row content-row" *ngFor="let user of group.array |  search: term | orderBy: order | paginate: {itemsPerPage: 13, currentPage:page1, id: '1'}"
                     [routerLink]="['/user/edit', user.id]">
                     <div class="col col-md-6">{{user.fullname}}</div>
                     <div class="col col-md-2">{{user.email}}</div>
                     <div class="col col-md-2">{{user.address}}</div>
                     <div *ngIf="user.phone != null" class="col col-md-2">{{user.phone}}
                     </div>
                     <div *ngIf="user.phone == null" class="col col-md-2"><span class="badge badge-danger">-- N/A -- </span></div>
                  </div>
               </div>
               <div *ngIf="group.name != 'all'">
                  <div class="row content-row">
                     <div class="col col-md-12 group-name" (click)="toggleGroup(group.name)">{{group.name + ':'}}</div>
                  </div>
                  <div *ngIf="showGroup == group.name">
                     <div class="row content-row" *ngFor="let user of group.array | search: term |   paginate: {itemsPerPage: 5, currentPage:page2, id: '2'}"
                     [routerLink]="['/user/edit', user.id]">
                     <div class="col col-md-6" style="padding-left:23px;">{{user.fullname}}</div>
                     <div class="col col-md-2">{{user.email}}</div>
                     <div class="col col-md-2">{{user.address}}/div>
                     <div class="col col-md-2">{{user.phone}}
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <div *ngIf="!(users[0].array.length > 0)" class="row noResults">
            <label>No results..</label>
         </div>
         <div *ngIf="users[0].name == 'all'" class="paggination-row">
            <div class="paggination">
               <pagination-controls (pageChange)="page1 = $event" id="1" maxSize="5" directionLinks="true" autoHide="true" previousLabel="Previous"
                  nextLabel="Next">
               </pagination-controls>
            </div>
         </div>
         <div *ngIf="user[0].name != 'all' && showGroup != ''" class="paggination-row">
            <div class="paggination">
               <pagination-controls (pageChange)="page2 = $event" id="2" maxSize="5" directionLinks="true" autoHide="true" previousLabel="Previous"
                  nextLabel="Next">
               </pagination-controls>
            </div>
         </div>
      </div>
   </div>
</div>
</div>
</div>

В компоненте ts:

     order = 'name';
        users: any = [{
            name: 'all',
            array: []
        }];
showGroup = '';


    loadUsers() {
        this.userService.getAll().subscribe(res => {
            this.users[0].array = res.data;
        }, err => {
            this.toast.error('Users: ' + JSON.parse(err._body).message, 'FAILED')
        })
    }
  toggleGroup(group) {
        if(this.showGroup == group) {
            this.showGroup = '';
        } else {
            this.showGroup = group;
        }
    }

 this.userService.currentData.subscribe(res => {
            if (res == 'default') { //subscribe to shared data
                this.loadUsers();
            } else {
                this.users= res;
            }
        })

Этоэто userService

import { Injectable } from '@angular/core';
import { Http, Headers } from "@angular/http";
import 'rxjs/add/operator/map';
import { AppSettings } from '../../../../../../app.settings';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

//service made to comunicate with backend
@Injectable()
export class UserService {
    private dataSource = new BehaviorSubject<any>("default")
    currentData = this.dataSource.asObservable();

    constructor(
        private http: Http
    ) { }

    updateData(data) {
        this.dataSource.next(data);
    }

    getAll() {
        let headers = new Headers();
        let token = localStorage.getItem('feathers-jwt');

        headers.append('Content-Type', 'application/json');
        headers.append('Authorization', 'Bearer ' + token)
        return this.http.get(AppSettings.API_ENDPOINT + '/user', { headers: headers }).map(res => res.json())
    }

    getOne(id) {
        let headers = new Headers();
        let token = localStorage.getItem('feathers-jwt');

        headers.append('Content-Type', 'application/json');
        headers.append('Authorization', 'Bearer ' + token)
        return this.http.get(AppSettings.API_ENDPOINT + '/user?id=' + id, { headers: headers }).map(res => res.json())
    }

    createNew(user) {
        let headers = new Headers();
        let token = localStorage.getItem('feathers-jwt');

        headers.append('Content-Type', 'application/json');
        headers.append('Authorization', 'Bearer ' + token)
        return this.http.post(AppSettings.API_ENDPOINT + '/user', user, { headers: headers }).map(res => res.json())
    }

    delete(id) {
        let headers = new Headers();
        let token = localStorage.getItem('feathers-jwt');

        headers.append('Content-Type', 'application/json');
        headers.append('Authorization', 'Bearer ' + token)
        return this.http.delete(AppSettings.API_ENDPOINT + '/user?id=' + id, { headers: headers }).map(res => res.json())
    }

    edit(id, user) {
        let headers = new Headers();
        let token = localStorage.getItem('feathers-jwt');

        headers.append('Content-Type', 'application/json');
        headers.append('Authorization', 'Bearer ' + token)
        return this.http.patch(AppSettings.API_ENDPOINT + '/user?id=' + id, user, { headers: headers }).map(res => res.json())
    }
}

Я вставил только части кода в component.ts, которые актуальны в этом случае, все остальное - функции, которые не имеют к этому никакого отношения.

У меня естьпрочитайте этот код более 50 раз сейчас, я понятия не имею, что приводит к тому, что таблица не отображает более 50 записей.

Если вы можете посмотреть и сообщить мне, в чем может быть проблема, я был бы очень признателенмного!

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