无法将 ngModel 绑定到 ngx-bootstrap 分页答案

【问题标题】：Can't bind ngModel to ngx-bootstrap pagination无法将 ngModel 绑定到 ngx-bootstrap 分页
【发布时间】：2018-12-05 04:06:40
【问题描述】：

我正在构建一个组件。这是一个带有分页的简单列表，可以从 Web 服务中获取数据。我正在使用引导程序列出值和 ngx-bootstrap 分页组件。

问题是 currentPage 属性不能正常工作。该值已附加到变量，但组件显示的信息错误。

在组件内部，变量具有@Input 装饰器

 @Input() listFields?: string[]; //list of displayable fields in the list
 @Input() resourceService: ResourceService<T>; //webservice to fetch data
 @Input() pageSize ?: number; //number of items to receive from the webservice
 @Input() currentPage ?: number = 1; //current page
 @Input() modelParams?: HttpParams; //other parameters to send to the webservice

上面描述的变量是从ngx-bootstrap发送到分页组件的。

<pagination [(itemsPerPage)]="pageSize" [(ngModel)]="currentPage" [(totalItems)]="page.totalCount" 
  (pageChanged)="pageChanged($event)"></pagination>

我正在开发的组件接收来自@inputs 的值，如下所述。

<general-resource-list 
          [resourceService]="workshopService" 
          [listFields]="listFieldsWorkshop"
          [currentPage]="currentPage"
          [pageSize]="pageSize"
          [modelParams]="pageParams">
        </general-resource-list>

@Component({
  selector: 'app-workshops-list',
  templateUrl: './workshops-list.component.html',
  styleUrls: ['./workshops-list.component.scss']
})
export class WorkshopsListComponent{

  public listFieldsWorkshop = ['id','name','version'];
  public title = "Workshop List";
  public currentPage:number;
  public pageSize:number;
  public pageParams:HttpParams;

  constructor(
    public workshopService: WorkshopService,
    public workShopRoute: ActivatedRoute, 
    public workshopRouter: Router) {
      this.workShopRoute.queryParams.subscribe(params => {
      
        this.pageParams = new HttpParams();
        for(let key in params){
          if(!["page","pageSize"].includes(key)){
            this.pageParams = this.pageParams.append(key,params[key]);
          }
        }
        this.currentPage = params['page']? params['page']:1;
        this.pageSize = params['pageSize']? params['pageSize']:10;
      });
    }
}

首先我认为这是因为 @Input 是在渲染组件之后加载的，但是即使我在构造函数中设置值或直接在变量声明中设置值，它也不起作用。

P.S.：pageSize 属性有效，和 currentPage 一样使用。

P.S.2：我不认为是实现ControlValueAccessor的情况，这应该是在ngx-bootstrap组件中实现的吧？

【问题讨论】：

Angular 2 custom form input的可能重复
对于ngModel指令，需要实现ControlValueAccessor...见骗子
我放弃了，切换到ng-bootstrap。

标签： angular pagination angular6 ngx-bootstrap

【解决方案1】：

对于仍然面临问题的任何人。我变了

this.currentPage = 1

在 api 调用之前。我在 api 响应中添加了 this.currentPage = 1 。它没有像它应该的那样工作。比我在 api 调用之前添加它并且它有效。

【讨论】：

【解决方案2】：

老实说，我认为这是 Angular 6 和/或 rxjs V6 引入的问题。不想详细检查，但看看解决方案是有道理的......

constructor(private cd: ChangeDetectorRef) {...}
...
updatePageContent(event:any):void {
...
      this.cd.detectChanges();
      this.currentPage = event.page;
...}

据我了解，更新需要告诉 Angular 在 UI 上已经发生了一些变化。发生了什么变化？好吧，我猜 Angular 与变量的更新不同步。因此，任何类型的更改都将被丢弃，内部计数器将占上风。

更新前面的组件可以在之后正确处理变量。

也许这是其他一些错误或不正确处理的解决方法 - 但它有帮助:-)

【讨论】：

【解决方案3】：

出现此问题是因为 currentPage 的值重置为 1。原因是，在（最初）获取数据之前，totalItems（此处为 page.totalCount）为 0，因此 currentPage 被重置为 1。作为一种简单的方法，您可以添加一个 *ngIf 。

即，

    <div *ngIf="page.totalCount">
<pagination [(itemsPerPage)]="pageSize" [(ngModel)]="currentPage" [(totalItems)]="page.totalCount" 
  (pageChanged)="pageChanged($event)"></pagination>
</div>

这对我有用。希望对大家有所帮助。

【讨论】：

【解决方案4】：

对于任何对使用 ngx-bootstrap 感兴趣的人，我通过在 HTML 标记中进行显式转换解决了这个问题。

[(ngModel)]="+pagination.CurrentPage"

【讨论】：