Question

我在我的Angle 5项目中使用了private buildForm(): void { const formArray = this.fb.array([]); this.form = this.fb.group({ title: [this.role.roleName], menuGroups: formArray }); this.role.menuGroup.forEach((menuGroup: MenuGroup) => { formArray.push(this.buildSubFormGroup(menuGroup)) }); } private buildSubFormGroup(menuGroup: MenuGroup): FormGroup { return this.fb.group({ title: [menuGroup.title, Validators.required], items: this.buildMenuItemFormGroup(menuGroup.menuItems) }); } private buildMenuItemFormGroup(menuItems: MenuItem[]): FormArray { const formArray = this.fb.array([]); const formGroup = this.fb.group({}); menuItems.forEach((menuItem: MenuItem) => { formGroup.addControl(menuItem.title, new FormControl()); }); formArray.push(formGroup); return formArray; }和mat-table。我已经包含了所有必需的内容，但是sort标头仍然不起作用，没有错误，并且表按照预期的那样生成。我的看法：

mat-sort

我的组件

    <h5>User List </h5>
<div class="example-container mat-elevation-z8">
  <div class="example-header">
    <mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
  </div>

  <mat-table #table [dataSource]="dataSource" matSort >

    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef mat-sort-header> User ID </mat-header-cell>
      <mat-cell *matCellDef="let item">
        {{item.id}}
        <span (click)="editUserData(item)"> edit </span>
        <span (click)="viewUserData(item)"> view </span>
        <span (click)="confirmDelete(item)"> delete </span>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="full_name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
      <mat-cell *matCellDef="let item"> {{item.full_name}}  </mat-cell>
    </ng-container>

    <ng-container matColumnDef="mobile">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Mobile / Phone </mat-header-cell>
      <mat-cell *matCellDef="let item"> {{item.mobile}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Email </mat-header-cell>
      <mat-cell *matCellDef="let item"> {{item.email}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="organization">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Organization </mat-header-cell>
      <mat-cell *matCellDef="let item"> {{item.organization}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="status">
      <mat-header-cell *matHeaderCellDef mat-sort-header> status </mat-header-cell>
      <mat-cell *matCellDef="let item"> {{item.status}} </mat-cell>
    </ng-container>



    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
  <mat-paginator #paginator
                 [pageSize]="10"
                 [pageSizeOptions]="[5, 10, 20]"
                 [showFirstLastButtons]="true">
  </mat-paginator>
</div>
<p-confirmDialog header="Confirmation" icon="fa fa-question-circle" width="425"></p-confirmDialog>

Answer 1

在将分类器应用于数据源之前，尝试等待应用更改：

this.appService.getUserDataList().subscribe(res => {
  this.employeeTemp = res;
  this.dataSource = new MatTableDataSource(this.employeeTemp);
  setTimeout(() => {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  });
});

再次构建数据源时（例如，删除后），应将排序和分页器重新绑定到新的数据源（因为先前的数据源已删除）

垫子分类标头不能在垫子角5上工作

1 个答案: