Не удается привязать ngModel к нумерации страниц с помощью ngx

Question

Я строю компонент. Это простой список с нумерацией страниц, который извлекает данные из веб-службы. Я использую bootstrap для вывода списка значений и ngx-bootstrap pagination component .

Проблема в том, что свойство 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

Для тех, кто все еще сталкивается с проблемой. Я изменил

this.currentPage = 1

до вызова API. Я добавил this.currentPage = 1 в ответ API. Это не сработало так, как должно. Чем я добавил его до вызова API, и он работал.

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, что в пользовательском интерфейсе что-то уже изменилось. Что было изменено? Ну, я думаю, что Angular не синхронизирован с обновлением переменных. Поэтому любые изменения будут отброшены, и внутренний счетчик будет преобладать.

Обновление компонента впереди обеспечивает надлежащую обработку переменных впоследствии.

Возможно, это обходной путь для какой-либо другой ошибки или неправильной обработки - но это помогает: -)

Answer 4

Для тех, кто заинтересован в использовании ngx-bootstrap, я решил проблему, выполнив явное приведение в разметке HTML.

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