Question

我正在使用ngx-bootstrap分页和api来加载消息。这是我的服务：

 getAllMessages(page): Observable<any> { //takes page number

    return this.http.get('/api/messages?offset='+ page + '&batchsize=10').map(data => data)
}

这是我的组件，它从服务和分页方法加载消息

export class MessageListComponent implements OnInit {

     messages: any[];
     totalItems = 33;
     currentPage = 1;
     smallnumPages = 0;


    pageChanged(event: any) {  //when you click number on pagination 
    this.spinnerService.show()
 this.messageService.getAllMessages(event.page).delay(1500).subscribe(data=> 
    { this.messages = data.messages, this.spinnerService.hide() });

  console.log('Page changed to: ' + event.page );
  console.log('Number items per page: ' + event.itemsPerPage);
}

这是html视图

<div id="listText">
        <div class="message-list" #em *ngFor="let message of messages;  let i=index" (click)="onAddtoMessage(message); activeIndex = i"
            [ngClass]="{'message-list-checked' : message.checked === true,  'message-list-active': activeIndex === i  }">
            <div class="row">
                <div class="col-lg-1">
                    <input type="checkbox" class="magic-checkbox" name="messages" id="{{message.id}}" value="message" [(ngModel)]="message.checked"
                        (ngModelChange)="changedCheckbox()">
                    <label for="{{message.id}}"></label>
                </div>
                <div class="col-lg-11">
                    <div class="row">
                        <div class="col-lg-6">
                            <span style="font-size: 13px; cursor:default">{{message.sender.name}}{{message.sender.id}}</span>
                        </div>
                        <div class="col-lg-6 text-right">
                            <span style=" font-size: 9px;  cursor:default">{{message.timeReceived | date: 'dd/MM/yyyy'}}</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <span style=" font-size: 10px; color: grey;  cursor:default">Subject: {{message.subject}}</span>
                        </div>
                        <div class="col-lg-6 text-right">
                            <img *ngIf="(message.numberAttachments)>0" src="https://www.shareicon.net/download/2016/09/14/829099_office_512x512.png"
                                style="width:25px">
                        </div>
                    </div>
                </div>
            </div>
            <p-contextMenu [target]="em" [model]="context_menu"></p-contextMenu>
        </div>
    </div>{{currentPage}}
    <pagination [totalItems]="totalItems" (pageChanged)="pageChanged($event)"></pagination>

所以问题是当我加载页面时，它将默认页面设置为1，但不将页码传递给方法，并且无法加载消息。只有当我点击分页符时，它才会将pageChanged() fucntion传递页码发送到服务并将消息返回到数组。那么当我加载页面时，如何设置它来加载默认传递第1页的消息？

Angular 4服务器端分页，如何在分页上设置默认加载？

0 个答案: