我想知道是否有人解决过这个问题！
我目前正在开发一个AdministrationComponent（类似于CRUD操作的单例），它旨在通过HTTP请求（封装在服务中）将操作发送到后端来管理4个不同表上的数据，然后将结果通过WebSockets发送到客户端（为将来在该组件上同时存在多个客户端做准备）。
我正在通过HTTP请求向后端检索数据，我在每个表中都可以毫无问题地显示它。
我正在实例化材料对话框，该对话框封装了每个表的每个CRUD操作。这些经过验证和完成后，会将相应的HTTPRequest及其操作及其数据发送到后端。 （每个表都有其自己的服务）
然后，我有一个单独的服务，该服务实现WebSockets，并且这是一个更新表上显示的数据的服务（因为此AdministrationComponent将由多个客户端使用）。]]
我必须进行验证（也许不称为验证（？）），它取决于多个表中的数据。例如：假设我们有表A，B和C。A中的一项可以与C中的项相关，但是只有在A和B都具有共同属性的情况下才可以访问。
现在，问题
：由于在表上显示数据工作正常，所以[[我的问题在于排序，过滤和分页]。 代码上似乎没有错误，但是它仅适用于第一个表，不适用于其他表，因为我无法弄清楚如何正确引用matSort和matPaginator。最初，我正在为matSort和matPaginator做ViewChild，例如：@Component({
selector: 'app-administration',
templateUrl: './administration.component.html',
styleUrls: ['./administration.component.scss']
})
export class AdministrationComponent implements OnInit {
users: any = [];
userTable_displayedColumns: string[] = ['name', 'organization', 'updatedAt', 'userActionsColumn'];
userTable_dataSource: MatTableDataSource<any>;
@ViewChild(MatPaginator, { static: true }) userTable_paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) userTable_sort: MatSort;
userTable_applyFilter(filterValue: string): void {
this.userTable_dataSource.filter = filterValue.trim().toLowerCase();
if (this.userTable_dataSource.paginator) {
this.userTable_dataSource.paginator.firstPage();
}
}
constructor (/* service Injection here */) {
this.userTable_dataSource = new MatTableDataSource;
// initialization of table with Promised HTTP request
// initialization of websockets channel which updates the data according to the backend
// this is done for the 4 different tables
}
ngOnInit(): void {
this.userTable_dataSource.paginator = this.userTable_paginator;
this.userTable_dataSource.sort = this.userTable_sort;
// this is done for the 4 different tables
}
// and the rest of the code here is filtering on the different tables,
//as well as launching Material Dialogs which are working fine
}
和模板（每个表在其自己的[[tab-pane中：]：
<!-- Users -->
<div class="tab-pane active" id="link1">
<div class="row">
<div class="col-md">
<button class="btn btn-enging btn-fill btn-wd mat-raised-button" mat-raised-button="" type="submit"
(click)="openDialogCreateUser()">
<span class="mat-button-wrapper">
<i class="material-icons">person_add</i> Adicionar Utilizador
</span>
<div class="mat-button-ripple mat-ripple" matripple=""></div>
<div class="mat-button-focus-overlay"></div>
</button>
</div>
<div class="col-md-6">
<mat-form-field class="example-full-width">
<input matInput placeholder="Encontrar..." (keyup)="userTable_applyFilter($event.target.value)"
value="">
</mat-form-field>
</div>
</div>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="userTable_dataSource" matSort>
<tr mat-header-row *matHeaderRowDef="userTable_displayedColumns"></tr>
<ng-container matColumnDef="userType">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Tipo de User </th>
<td mat-cell *matCellDef="let row"> {{row.userType}} </td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Username </th>
<td mat-cell *matCellDef="let row"> {{row.username}} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Nome </th>
<td mat-cell *matCellDef="let row"> {{row.name}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
<td mat-cell *matCellDef="let row"> {{row.email}} </td>
</ng-container>
<ng-container matColumnDef="organization">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Organização </th>
<td mat-cell *matCellDef="let row"> {{getOrganizationNameByID(row.organization)}} </td>
</ng-container>
<ng-container matColumnDef="updatedAt">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Último login </th>
<td mat-cell *matCellDef="let row"> {{row.updatedAt | date:'HH:mm, dd/MM/y' }} </td>
</ng-container>
<ng-container matColumnDef="userActionsColumn">
<th mat-header-cell *matHeaderCellDef mat-sort-header style="white-space: nowrap;"> Acções </th>
<td mat-cell *matCellDef="let row">
<div class="row">
<span class="mat-button-wrapper" (click)="openDialogViewUser(row)" style="cursor: pointer">
<i class="material-icons" style="color:#163b65">remove_red_eye</i>
</span>
<span class="mat-button-wrapper" (click)="openDialogEditUser(row)" style="cursor: pointer">
<i class="material-icons" style="color:rgba(22, 59, 101, 1)">edit</i>
</span>
<span class="mat-button-wrapper" (click)="openDialogRemoveUser(row)" style="cursor: pointer">
<i class="material-icons" style="color:rgba(22, 59, 101, 1)">clear</i>
</span>
</div>
</td>
</ng-container>
<tr mat-row *matRowDef="let row; columns: userTable_displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
</div>
</div>
<!-- Organizations, and so on ... -->
@ViewChild('userTablePaginator', { static: true }) userTable_paginator: MatPaginator; @ViewChild('userTableSort', { static: true }) userTable_sort: MatSort;模板：
<table mat-table [dataSource]="userTable_dataSource" #userTableSort="matSort" matSort> <mat-paginator #userTablePaginator="matSort" [pageSizeOptions]="[10, 25, 100]"></mat-paginator>但是它不起作用。
任何人都知道如何使它起作用？ ：）我想知道是否有人解决了这个问题！我当前正在开发一个AdministrationComponent（类似于CRUD操作的单例），用于管理...