Question

我是Angular 4的新手，我不得不编写分页代码。我使用名为“paginationFirst（）”和“paginationNext（）”的单独服务分别在表中加载第一页和下一页的数据。因此，在单击“第一个”选项卡时，应通过“firstPage（）”函数将第一个服务中的数据加载到表中，单击“下一步”选项卡时，应将第二个服务中的数据加载到表中通过“nextPage（）”函数。第一页的数据正在加载正常，但在单击下一个选项卡时，它不会加载下一页的数据。这两项服务都运行正常并显示正确的数据。我不想使用npm分页。请帮忙。

HTML：

<div>
    <table class="table table-hover">
        <thead>
            <tr>
                <th class="align-right">VALUE</th>
            </tr>
        </thead>
        <tbody>
           <tr *ngFor="let item of calendarTableSelected">
              item.value
           </tr>
       </tbody>
    </table>
</div>

<div class="pagination" *ngIf="tableDiv">
    <div>
        <a href="#" class="active" (click)="firstPage()" >First</a>
    </div>
    <div>
        <a href="#" (click)="previousPage()">Prev</a>
    </div>
    <div>
        <a href="#" (click)="nextPage()">Next</a>
    </div>
    <div>
        <a href="#" (click)="lastPage">Last</a>
    </div>
</div>

component.ts

firstPage(){
     this.calendarService.paginationFirst().subscribe(data => 
     this.calendarTableSelected = data);
}

nextPage(){
     this.calendarService.paginationNext().subscribe(data => 
     this.calendarTableSelected = data);
}

Service.ts

public paginationNext(){
    return this.http.get(environment.serverUrl+ '/api/nextpage')
               .map((responsePage:Response) => responsePage.json())
               .catch((err) => {
                   console.log('Error while getting response from service: '+ err);
                   return Observable.throw(err)
                 })
}

public paginationFirst() {
    return  this.http.get(environment.serverUrl+'/api/firstpage')
                  .map((resService4:Response) => resService4.json())
                  .catch((err) => {
                      console.log('Error while getting response from service: '+ err);
                     return Observable.throw(err)
              })
}

Please click here to see the screen from the developer tools displaying that the service is returning response

Screenshot for the network tab

Answer 1

我找到了解决方案。下面我发布了我的答案。

                    <div>
                        <button class="active" (click)="firstPage()" >First</button>
                    </div>


                    <div>
                        <button (click)="previousPage()">Prev</button>
                    </div>

                    <div>
                        <button (click)="nextPage()">Next</button>
                    </div>

                    <div>
                        <button (click)="lastPage()">Last</button>
                    </div>

Answer 2

在您的组件中，您可以设置如下值：

this.calendarTableSelected = data

但是在你的HTML中，你会像这样迭代

*ngFor="let item of calendarTable"

要么你没有意识到这一点，要么你忘记了一些代码！

Angular 2 - Pagination next不会触发加载下一页数据的功能

2 个答案: