Question

我尝试使用下面的代码更改Edit Click事件上行的颜色，并且工作正常

  <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时，我的工作会很好。

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

Answer 1

尝试调用第二个表element2中的元素或第一个元素以外的其他名称。不会有相同的问题，我会将每个表放在单独的组件中，并通过@Input属性提供所需的数据。

您在这里：https://stackblitz.com/edit/angular-5fvdgj

您只需要写

@ViewChild('MatPaginator1') paginator: MatPaginator;

您必须对MatPaginator2做同样的操作

，在MatPaginator1前面的html中，您需要＃，以便angular可以通过ID找到它。您不需要

@ViewChild(MatPaginator1) paginator: MatPaginator;

没有''是不必要的。

您需要执行相同的排序操作。但是，代替＃sort1，您需要为＃2编写相同的＃matSort1 =“ matSort”。

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，行颜色更改和分页器不起作用？

2 个答案: