为什么在同一页上实施 2 Mat-Table 行颜色更改和分页器不起作用？

Question

我尝试使用以下代码更改编辑点击事件中行的颜色并且工作正常

  <table mat-table [dataSource]="dataSourceUsersTbl" class=" full-width users-grid" matSort>
    <ng-container matColumnDef="fullname">
    <th mat-header-cell *matHeaderCellDef class="fullName-col" mat-sort-header> Full Name </th>
    <td mat-cell *matCellDef="let element" class="fullName-col"> {{element.fullname}} </td>
     </ng-container>
      <ng-container matColumnDef="action">
      <th mat-header-cell *matHeaderCellDef class="action-col"> Actions </th>
      <td mat-cell *matCellDef="let element" class="action-col">
        <button mat-icon-button matTooltip="Edit" (click)="openEditDialog(element)">
       <i class="material-icons">edit</i>
        </button>          
       </td>
       </ng-container>
     <tr mat-header-row *matHeaderRowDef="displayedColumnsUsers; sticky: false"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumnsUsers;" 
    [ngClass]="{ row-edited': selectedRowIndex == element.userid}"></tr>
   </table>
   <mat-paginator #MatPaginator1 [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons class="dino-grid-paging">
    </mat-paginator>

但是当我在同一页中添加第二个 mat-table 时出现如下问题

UsersMasterComponent.html:61 ERROR TypeError: Cannot read property   'userid' of undefined
at Object.eval [as updateDirectives] (UsersMasterComponent.html:62)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:23910)
at checkAndUpdateView (core.js:23306)
at callViewAction (core.js:23547)
at execEmbeddedViewsAction (core.js:23510)
at checkAndUpdateView (core.js:23307)
at callViewAction (core.js:23547)
at execComponentViewsAction (core.js:23489)
at checkAndUpdateView (core.js:23312)
at callViewAction (core.js:23547)

同样在第一个分页器网格中，它给出了第二个网格行的行数。

在组件方面，我也尝试过如下编写一些代码，并将它们与 MatPaginator1 和 MatPaginator2 区分开来，但仍然无法正常工作

@ViewChild('MatSort1') MatSort1: MatSort;
@ViewChild('MatPaginator1') MatPaginator1: MatPaginator;
@ViewChild('MatSort2') MatSort2: MatSort;
@ViewChild('MatPaginator2') MatPaginator2: MatPaginator;


ngOnInit() {
  this.dataSourceUsersTbl.sort = this.MatSort1;
  this.dataSourceUsersTbl.paginator = this.MatPaginator1;
  this.dataSourceAssignPermission.sort = this.MatSort1;
  this.dataSourceAssignPermission.paginator = this.MatPaginator2;
}

在编辑点击时，颜色应该随着给出的问题而改变，分页应该工作正常，在第二个网格中排序不起作用

注意：当我在一页中实现 2 mat-table 时会出现此问题，在应用单个 mat-table 时我的东西工作正常。

有关更多信息，请查看此 link https://stackblitz.com/edit/angular-c79ptl

Answer 1

尝试调用第二个 table element2 中的元素或第一个元素以外的其他名称。为了避免出现同样的问题，我会将每个 table 放在单独的组件中，并使用 @Input 属性.

提供所需的数据

给你：https://stackblitz.com/edit/angular-5fvdgj

你只需要写

@ViewChild('MatPaginator1') paginator: MatPaginator;

你必须对 MatPaginator2 做同样的事情

并且在 html 的 MatPaginator1 前面需要 # 以便 angular 可以通过 Id 找到它。你不需要

@ViewChild(MatPaginator1) paginator: MatPaginator;

没有 ' ' 是不必要的。

您需要对排序执行相同的操作。但是，您需要为排序 2 编写 #matSort1="matSort" 而不是 #sort1。

Answer 2

试试这个

@ViewChild('firstPaginator', {static: true}) firstPaginator: MatPaginator;
@ViewChild('secondPaginator', {static: true}) secondPaginator: MatPaginator;

在HTML

<mat-paginator #firstPaginator [pageSize]="5"></mat-paginator>

<mat-paginator #secondPaginator [pageSize]="5"></mat-paginator>

为什么在同一页上实施 2 Mat-Table 行颜色更改和分页器不起作用？

Why on implementing 2 Mat-Table on same page Row color change and paginator not working?

angular

angular5

angular6

angular7