Question

我的桌子有分页，每页显示13个项目。

让我们假设我正在创建新的＆＃34;用户＆＃34;我有特定的模式来创建用户，我可以填写所有数据。创建用户后，有关该用户的最基本信息将显示在表格名称，地址，电子邮件和电话中。

现在，如果我创建了50个用户，他们就会在我的表格中正确显示，并且我的分页效果非常好。如果我创建超过50个用户。我的第51位和从50号前进的任何用户都没有出现在表格中！

我检查了我的数据库，并且在POSTGRES TABLE中成功创建了条目..对于第51个，第52个bla bla但是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个。

如果你能看看并让我知道可能是什么问题，我会非常感激！

表格仅显示50个条目

0 个答案: