Как заставить нумерацию страниц работать с ngIf на Angular? - PullRequest
Новая
       28

Как заставить нумерацию страниц работать с ngIf на Angular?

1 голос
/ 13 января 2020

Я пытался использовать setTimeout (), и я даже пытался использовать [скрытый] вместо ngIf. Я также попытался поместить paginator вне элемента, заключенного в ngIf. Я буду обновлять свой вопрос по мере того, как буду проводить дополнительные исследования, но если кто-нибудь сможет указать мне правильное направление, это было бы здорово. Ниже приведен код HTML: 

    <div fxLayout="row" fxLayoutAlign="center" class="report-container">
    <mat-card fxFlex.lg="98" fxFlex.md="98" fxFlex.sm="98" fxFlex.xs="98" *ngIf="!loading">
    <div fxLayout="row" fxLayoutAlign="space-between none">
      <mat-form-field>
        <mat-label>Report Type</mat-label>
        <mat-select [value]="reportOptions[0].path">
          <mat-option *ngFor="let option of reportOptions" [value]="option.path" routerLink="{{ option.link }}">
            {{ option.path }}</mat-option
          >
        </mat-select>
      </mat-form-field>

      <mat-search-bar matInput (keyup)="applyFilter($event.target.value)"></mat-search-bar>
    </div>

    <mat-table [dataSource]="dataSource" matSort>
      <ng-container matColumnDef="column1">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Column1</th>
        <td mat-cell *matCellDef="let element">
          <div class="mat-conventions text-data">
            {{ element.column1 }}
          </div>
        </td>
      </ng-container>

      <ng-container matColumnDef="column2">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Column2</th>
        <td mat-cell *matCellDef="let element">
          <div class="mat-conventions text-data">
            {{ element.column2 }}
          </div>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </mat-table>

    <mat-paginator [pageSizeOptions]="[10, 25, 50]" showFirstLastButtons></mat-paginator>
  </mat-card>

  <div fxFlex.lg="98" fxFlex.md="98" fxFlex.sm="98" fxFlex.xs="98" *ngIf="loading" fxFill>
    <div fxLayout="row" fxLayoutAlign="center center">
      <mat-spinner *ngIf="loading" class="spinner-loading"></mat-spinner>
    </div>
  </div>
</div>

А вот код машинописи с ngOnInit и ngAfterViewInit: 

@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;

constructor(private apollo: Apollo) {}

ngOnInit() {
  this.dataSource = new MatTableDataSource(this.reportData());
}

ngAfterViewInit() {
  this.dataSource.sort = this.sort;
  this.dataSource.paginator = this.paginator
}

Ответы [ 2 ]

1 голос
/ 13 января 2020

Попробуйте установить this.dataSource.paginator = this.paginator после this.loading = false и this.dataSource.data = data

UPD: вам нужно изменить AfterContentChecked на AfterContentInit и добавить его: 

 private paginator: MatPaginator;
  @ViewChild(MatPaginator, {static: false}) set matPaginator(mp: MatPaginator) {
    this.paginator = mp;
    this.dataSource.paginator = this.paginator;
  }

Пример : https://stackblitz.com/edit/angular-afp7wg

0 голосов
/ 13 января 2020

Я могу придумать 2 варианта. Сначала выкладываем компонент paginator из условно визуализированного div. Это не желательное решение. Лучшим подходом было бы установить сеттер для paginator и назначить ему пагинатор источника данных, если он не равен нулю. 

@ViewChild(MatPaginator, { static: true }) _paginator: MatPaginator;
set paginator(value) {
    this._paginator = value;
    if (value)
        this.datasource.paginator = value;

}

...