Question

我在两个不同的标签中显示了两个Angular Material表。每当初始化我的视图时，第一个选项卡的表就会通过服务填充内容（排序和分页在此菜单上正常工作）。然后，我有一个按钮，按下该按钮后，将创建一些对象并成功填充第二个表。这里的问题是第二张表的排序和分页功能不起作用。

我在调试时注意到的是第二个表的sort元素具有一个sortable属性，该属性具有定义了mat-sort-header的第一个表的所有列。我不明白为什么会这样。

我有两个函数来设置表的内容，排序和分页，但是即使这些函数相等，也只有第一个表的函数起作用。

这是我的代码：

MyComponent.component.ts

private displayedColumnsRequests = ['edit', 'request_prod_sku', 'request_prod_qty', 'request_indication', 'action'];
private displayedColumnsOrders = ['check', 'prod_sku', 'prod_net_price_eur', 'disc_value_eur', 'prod_price_eur', 'quantity', 'prod_total'];

private dataSourceOrders = new MatTableDataSource(this.orders);
private dataSourceRequests = new MatTableDataSource(this.requests);

@ViewChild(MatSort) ordersSort: MatSort;
@ViewChild(MatSort) requestsSort: MatSort;
@ViewChild(MatPaginator) ordersPaginator: MatPaginator;
@ViewChild(MatPaginator) requestsPaginator: MatPaginator;

constructor(private requestsService: RequestsService){}

ngOnInit() {
  this.requestsService.currentOrders.subscribe(orderData => this.setOrdersArray(orderData));
 this.requestsService.currentProductsWithIndicationToCreate.subscribe(indicationData => {
      this.setProductsWithIndication(indicationData);
    });

  this.setSecondTableDataSource();
  this.setFirstTableDataSource(); // This one is working as intended
  }

private setOrdersArray(el) {
  this.orders = [];
  for (let key in el) {
    el[key].checked = false;
    el[key].selectedQuantity = 1;
    this.orders.push(el[key]);
  }
}

private setFirstTableDataSource() {
  setTimeout(() => {
    this.dataSourceOrders = new MatTableDataSource(this.orders);
    this.dataSourceOrders.sort = this.ordersSort;
    this.dataSourceOrders.paginator = this.ordersPaginator;
  });
}

private setSecondTableDataSource() {
  setTimeout(() => {
    this.dataSourceRequests = new MatTableDataSource(this.requests);
    this.dataSourceRequests.sort = this.requestsSort;
    this.dataSourceRequests.paginator = this.requestsPaginator;
  });
}

onButtonPress() {
  let req = new Request();
  req.request_order_id = 12345;
  req.request_prod_qty = 1;
  req.request_indication = "Refund";
  req["edit"] = false;
  this.requests.push(req);
  this.setSecondTableDataSource();
}

MyComponent.component.html

<mat-tab-group>
  <mat-tab label="1st Tab">
    <div class="row">
      <div class="col-12">
        <mat-table #table [dataSource]="dataSourceOrders" matSort>
         ........... Table Data ............
          <mat-header-row *matHeaderRowDef="displayedColumnsOrders"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumnsOrders;"></mat-row>
        </mat-table>
        <mat-paginator #ordersPaginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20]"></mat-paginator>
      </div>
    </div>
  </mat-tab>
  <mat-tab label="2nd Tab">
    <div class="row">
      <div class="col-12">
        <mat-table #table [dataSource]="dataSourceRequests" matSort>
         ........... Table Data ............
          <mat-header-row *matHeaderRowDef="displayedColumnsRequests"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumnsRequests;"></mat-row>
        </mat-table>
        <mat-paginator #requestsPaginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20]"></mat-paginator>
      </div>
    </div>
  </mat-tab>
</mat-tab-group>

<button class="btn btn-primary confirm-request-btn" type="button" id="confirm-request-btn-id" (click)="onButtonPress()"> Confirm </button>

我正在寻找的场景是：1.初始化视图； 2.显示带有第一个表的第一个选项卡，可以对表进行排序和分页； 3.按下按钮； 4.显示带有第二个表的第二个选项卡，可以对表进行排序和分页。

由于第二张表的排序和分页器不起作用，我当前遇到的情况一直到第四步。

为什么我的表格内容被更新，但我的排序和分页却没有？

0 个答案: