1

我已经使用 laravel 5.5 在我的 angular 5 项目之一中安装了 ngx-pagination。我的 Angular 项目正在使用 Laravel 的 API。我在 HTML、ts 和服务文件中包含以下内容,如下所示:

// ts file
getPage(number){
      this.productService.getURLpagengx(number).subscribe(data => {
        this.products = data.products.data;
        this.products_paging = data.products;
        
        });
}


// service file
getURLpagengx(no): Observable<any>{
const url = '${this.url}/api/product?page='+no;
return this.http.get(url,{headers: new HttpHeaders({Authorization:'Bearer '+ this.token})});
}
  <div class="row">
    <article class="col-md-4"  *ngFor="let product of products | paginate: { itemsPerPage: 1, currentPage: p, totalItems: products_paging.total }">    
      <div class="mt-3 mb-3">
          <div class="col-md-12">
          <div class="font-weight-bold">{{product.product_name}}</div>
          <p>{{product.description}}</p>
          <p>{{product.rating}}</p>
          <div class="pt-2 pb-2 border-top border-bottom">
            <div class="mt-1">
            </div>
          </div>  
          </div>
      </div>
    </article>
  </div>

我的分页运行良好,但分页中当前单击的按钮未激活/未激活(例如蓝色)。

下面是从 Laravel 服务器端接收到的 JSON 值:

{
    "products": {
        "current_page": 2,
        "data": [
            {
                "id": 6,
                "product_name": "Patrick Stoltenberg",
                "description": "Dinah, tell me the truth: did you call him Tortoise--' 'Why did they live on?' said Alice, who felt ready to ask help of any one; so, when the White Rabbit. She was looking up into the air off all.",
                "rating": 8,
                "price": 13.5,
                "uploaded_image": "",
                "created_at": "2018-03-22 05:34:39",
                "updated_at": "2018-03-22 05:34:39"
            },
            {
                "id": 7,
                "product_name": "Micheal Davis",
                "description": "Has lasted the rest of my own. I'm a deal faster than it does.' 'Which would NOT be an advantage,' said Alice, 'a great girl like you,' (she might well say this), 'to go on crying in this way! Stop.",
                "rating": 3,
                "price": 27.6,
                "uploaded_image": "",
                "created_at": "2018-03-22 05:34:39",
                "updated_at": "2018-03-22 05:34:39"
            },
            {
                "id": 9,
                "product_name": "Minnie Ebert",
                "description": "Mouse had changed his mind, and was going to leave off being arches to do it?' 'In my youth,' Father William replied to his son, 'I feared it might injure the brain; But, now that I'm perfectly sure.",
                "rating": 0,
                "price": 40.9,
                "uploaded_image": "",
                "created_at": "2018-03-22 05:34:39",
                "updated_at": "2018-03-22 05:34:39"
            },
            {
                "id": 10,
                "product_name": "Noble Jerde1",
                "description": "He looked at the top of its right ear and left off quarrelling with the bones and the beak-- Pray how did you do either!' And the executioner ran wildly up and beg for its dinner, and all the party.",
                "rating": 14,
                "price": 25,
                "uploaded_image": "",
                "created_at": "2018-03-22 05:34:39",
                "updated_at": "2018-04-04 07:23:13"
            },
            {
                "id": 11,
                "product_name": "Flo Connelly",
                "description": "INSIDE, you might do something better with the lobsters to the other, and making faces at him as he came, 'Oh! the Duchess, who seemed to her feet in a natural way again. 'I wonder if I've kept her.",
                "rating": 9,
                "price": 40.8,
                "uploaded_image": "",
                "created_at": "2018-03-22 05:34:39",
                "updated_at": "2018-03-22 05:34:39"
            }
        ],
        "first_page_url": "http://localhost:8000/api/product?page=1",
        "from": 6,
        "last_page": 3,
        "last_page_url": "http://localhost:8000/api/product?page=3",
        "next_page_url": "http://localhost:8000/api/product?page=3",
        "path": "http://localhost:8000/api/product",
        "per_page": 5,
        "prev_page_url": "http://localhost:8000/api/product?page=1",
        "to": 10,
        "total": 15
    }
}
4

1 回答 1

1

这是我的示例代码,您可以使用它

html

<div *ngIf="members?.length else noAll">
                    <ngx-loading [show]="paginationLoader"></ngx-loading>
                        <ul class="list-group">
                                <li class="list-group-item aud-padding p-l-xxs"  *ngFor="let member of members | paginate: {id: 'server', itemsPerPage: pageLimitAndIndex.limit, currentPage: p, totalItems: totalMemberCount}">
                                        <span>
                                            <span class="checkbox m-r-sm" style="display:inline">
                                                    <mat-checkbox (change)="checkPaidUser($event, member.id)" name="paidMember[]" [(ngModel)] ="member.checked" class="member-checkbox m-m-t"></mat-checkbox>
                                            </span>
                                        </span>
                                            <span class="p-l-xs">

                                                <span class="m-t-sm">
                                                    <span>  
                                                        <strong>{{(member.firstName+' '+member.lastName) | UcWords}}</strong>
                                                    </span>
                                                    <span> &nbsp;|&nbsp;{{member.email}} </span>
                                                    <span> &nbsp;|&nbsp; {{member.mobile}} </span>

                                                </span>
                                            </span> 


                                </li>
                            </ul>
                    </div>
                    <div  class="col-xs-12 col-sm-12 col-md-12 pull-right">
                        <br><br>
                        <pagination-controls *ngIf="totalMemberCount > pageLimitAndIndex.limit"  (pageChange)="pageChanged($event)"  id="server"  class="my-pagination pull-right"></pagination-controls>
                    </div>

控制器代码:-

public pageLimitAndIndex = {limit: 20, index: 0};
p: Number = 1;
totalMemberCount: Number = 0;

onInit中调用常用函数

ngOnInit() {
  this.getPaidMemberDetail(this.pageLimitAndIndex);
}

常用功能

  getPaidMemberDetail(params: Object = null) {
    let data = null;
    if (params != null) {
        data = params;
    }
    this.totalMemberCount = 0;
    this.appService.getJsonRequest(url, data).subscribe(result => {
        this.members = result.members;
        this.totalMemberCount = result.totalMemberCount;
        this.p = data.index + 1;       
    }, err => {
      console.log(err)
    });
  }

换页功能

   pageChanged (page) {
    this.pageLimitAndIndex.index = (page - 1);
    this.paginationLoader = true;
    this.getPaidMemberDetail(this.pageLimitAndIndex);
  }

我的 json 回复

{
"status": 200,
"members": [{
    "id": "5abcec6772c4312ca16e205b",
    "firstName": "amd",
    "lastName": "ww",
    "email": "me.xs@rediffmail.com",
    "deleted": false,
}]
"totalMemberCount": 25
 }
于 2018-04-19T11:05:33.450 回答