Угловой материал несколько страниц в одном компоненте и вид - PullRequest
0 голосов
/ 28 февраля 2019

Имеют в виду 2 таблицы и отображают некоторые графики вместе с таблицами, все работает, кроме разбивки на 2 таблицы., который берет данные из 2 источников.Когда Paginator верхней таблицы нажал на нижнюю таблицу, изменились данные, компонент

инициализировал paginator и таблицы с источниками данных,

My Component.ts

  export class FinancialMetricsComponent implements OnInit, AfterViewInit {

  pageSize = 20;
  dataSource: MatTableDataSource<SnowTicket> | null;
  utilizationDataSource: MatTableDataSource<Utilization> | null;

  @ViewChildren(MatPaginator) paginator = new QueryList<MatPaginator>();
  @ViewChildren(MatSort) sort = new QueryList<MatSort>();




ngOnInit() {

    this.changeDataAccordingToDate();
    this.dataSource = new MatTableDataSource();
    this.data$.pipe(
      filter(Boolean)
    ).subscribe((tickets) => {
      this.accountsData = tickets;
      this.dataSource.data = tickets;
    });

    this.pcsService.getUtilizationData('120').subscribe(resources => {
      this.utilizationSubject$.next(resources);
    });
    this.utilizationDataSource = new MatTableDataSource();
    this.utilizationData$.pipe(
      filter(Boolean)
    ).subscribe((tickets) => {
      this.utilizationData = tickets;
      this.utilizationDataSource.data = tickets;
    });
  }


  ngAfterViewInit(): void {
    this.dataSource.paginator = this.paginator.toArray()[0];
    this.dataSource.sort = this.sort.toArray()[0];

    this.utilizationDataSource.paginator = this.paginator.toArray()[1];
    this.utilizationDataSource.sort = this.sort.toArray()[1];

    }
}

В представленные здесь добавлены только таблицы, в которых есть страницы.Когда у paginator в верхней части есть стол, нижний paginator стола работает.иначе работает только верхняя страница, при нажатии на нижнюю таблицу изменяются данные,

View.html

<fury-list name="AWS Resources Expenditure" [columns]="columns" (filterChange)="onFilterChange($event)">
  <mat-table #table [dataSource]="dataSource" matSort>
    <ng-container *ngFor="let column of columns">
      <ng-container *ngIf="column.notCurrency" [matColumnDef]="column.property">
        <mat-header-cell *matHeaderCellDef mat-sort-header> {{ column.name }}</mat-header-cell>
        <mat-cell *matCellDef="let row">
          <span class="fury-mobile-label">{{ column.name }}</span> {{ row[column.property] }}
        </mat-cell>
      </ng-container>
      <ng-container *ngIf="!column.notCurrency" [matColumnDef]="column.property">
        <mat-header-cell *matHeaderCellDef mat-sort-header> {{ column.name }}</mat-header-cell>
        <mat-cell *matCellDef="let row">
          <span class="fury-mobile-label">{{ column.name }}</span> {{ row[column.property] | currency }}
        </mat-cell>
      </ng-container>
    </ng-container>
    <mat-header-row *matHeaderRowDef="visibleColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: visibleColumns;"></mat-row>
  </mat-table>
  <mat-paginator #paginator class="paginator" [pageSize]="10"></mat-paginator>
</fury-list>



<fury-list name="AWS EC2 Utilization (Past 120 days)" [columns]="utilizationColumns" (filterChange)="onFilterChangeU($event)">
  <mat-table #table [dataSource]="utilizationDataSource" matSort>

    <ng-container *ngFor="let column of utilizationColumns">
      <ng-container *ngIf="!column.isAvg" [matColumnDef]="column.property">
        <mat-header-cell *matHeaderCellDef mat-sort-header> {{ column.name }}</mat-header-cell>
        <mat-cell *matCellDef="let row">
          <span class="fury-mobile-label">{ { column.name }}</span> {{ row[column.property] }}
        </mat-cell>
      </ng-container>
      <ng-container *ngIf="column.isAvg" [matColumnDef]="column.property">
        <mat-header-cell *matHeaderCellDef mat-sort-header> {{ column.name }}</mat-header-cell>
        <mat-cell *matCellDef="let row">
          <span class="fury-mobile-label">{{ column.name }}</span> {{ row[column.property]}}
          <mat-icon *ngIf="row[column.property] < 10"> trending_down</mat-icon>
          <mat-icon *ngIf="row[column.property] > 70"> trending_up</mat-icon>
        </mat-cell>
      </ng-container>
    </ng-container>

    <mat-header-row *matHeaderRowDef="visibleColumnsU"></mat-header-row>
    <mat-row *matRowDef="let row; columns: visibleColumnsU;"></mat-row>
  </mat-table>
  <mat-paginator #paginatorU class="paginator" [pageSize]="5"></mat-paginator>
</fury-list>

Ответы [ 2 ]

0 голосов
/ 28 февраля 2019

Я бы связывал paginators на основе их переменной шаблона и не полагался на QueryList, чтобы содержать их в правильном порядке.

@ViewChild('paginator') paginator: MatPaginator;
@ViewChild('paginatorU') paginatorU: MatPaginator;

ngAfterViewInit(): void {
  this.dataSource.paginator = this.paginator;
  this.dataSource.sort = this.sort.toArray()[0];
  this.utilizationDataSource.paginator = this.paginatorU;
  this.utilizationDataSource.sort = this.sort.toArray()[1];
}
0 голосов
/ 28 февраля 2019

вам нужно определить два разных пагинатора, если вы хотите, чтобы они работали независимо.

...