Моя таблица имеет нумерацию страниц для отображения 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 записей.
Если вы можете посмотреть и сообщить мне, в чем может быть проблема, я был бы очень признателенмного!