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

Question

我正在构建一个组件。这是一个带有分页的简单列表，可从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组件中实现了，不是吗？

Answer 1

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

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

Answer 2

发生此问题是因为 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>

这对我有用。希望对您有帮助。

Answer 3

老实说，这是Angular 6和/或rxjs V6引入的一个问题。不想详细检查，但查看解决方案很有意义...

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

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

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

也许这是其他一些 bug 或不正确处理的解决方法-但这很有帮助：-）

Answer 4

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

  

this.currentPage = 1

在api调用之前。我在api响应中添加了this.currentPage = 1。它没有按预期方式工作。 比起在api调用之前添加它，它起作用了。