Question

我对Angular材质表排序有问题，我从onInit函数中的servn获取数据，然后在应用程序获取数据时，将其放入dataSource中，然后设置分页和排序。只是不起作用，我可以单击表格上的箭头，但不能对元素进行排序。

我试图在响应后，回调或onAfterViewInit函数中立即设置它。

  public displayedColumns: string[] = ['CreatedDate', 'CreatedBy', 'Name', 'Version', 'URL', 'Language', 'deleted','download'];
  public dataSource = new MatTableDataSource();
  public noDataMessage;
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor(
    private _http: HttpClient, 
    private _snackBar: MatSnackBar, 
    private _router: Router,
    private _errorHandlingService: ErrorHandlingService,
    public _permissionCkecher: PermissionCheckerService) {
  }

  ngOnInit() {
    this.getDocumentList();
  }

  /**
   * Applys filter
   * @param filterValue 
   */
  public applyFilter(filterValue: string): void {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

  /**
   * Gets document list
   */
  private getDocumentList(): void {
    this._http.get('/api/Document/WithParam?ignoreGlobalFilter=true').subscribe(data => {
      if(data && (<any>data).length !== 0) {
        let listedDocumentData = (<any>data);
        this.addCategoryToDoc(listedDocumentData);
        this.dataSource.sort = this.sort;
      } else {
        this.noDataMessage = true;
      }
    },error => {
      this._errorHandlingService.handlingError(error);
    }
  )
  }

  /**
   * Gets Doc Categories
   */
  private addCategoryToDoc(DocList): any {
    this._http.post('/api/DocumentCategory/ListAll?ignoreCultureInfo=true',{}).subscribe(data => {
      let docCats;
        if(data) {
          docCats = (<any>data).filteredData;
        }
        DocList.forEach(LinkElement => {
          LinkElement.Category = docCats.filter(CatElement => CatElement.id === LinkElement.categoryId)[0]
        });
   //Here i call the callback
        this.addDataToDataSource(DocList);
      }, error => this._errorHandlingService.handlingError(error)
    )
  }

 //Here is the callback
  private addDataToDataSource(listedDocData) {
    this.dataSource = new MatTableDataSource(listedDocData);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
 }

这是HTML：

<div class="main-container">
    <section class="listing document">
    <mat-form-field class="search-field">
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search" autocomplete="off">
    </mat-form-field>
    <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">

        <ng-container matColumnDef="CreatedDate" >
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Created</th>
            <td mat-cell *matCellDef="let element"> {{element.dateCreated}} </td>
        </ng-container>

        <ng-container matColumnDef="CreatedBy">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Created By</th>
            <td mat-cell *matCellDef="let element"> {{element.createdBy}} </td>
        </ng-container>

        <ng-container matColumnDef="Name" >
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
            <td mat-cell *matCellDef="let element"> {{element.name}} </td>
        </ng-container>

        <ng-container matColumnDef="Version">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Version</th>
            <td mat-cell *matCellDef="let element"> {{element.version}} </td>
        </ng-container>

        <ng-container matColumnDef="URL">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Document Category</th>
            <td mat-cell *matCellDef="let element"> {{((element.Category)?element.Category.name:'')}} </td>
        </ng-container>

        <ng-container matColumnDef="deleted">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Deleted element</th>
            <td mat-cell *matCellDef="let element"> {{((element.isDeleted)?'igen':'nem')}} </td>
        </ng-container>

        <ng-container matColumnDef="Language">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Language</th>
            <td mat-cell *matCellDef="let element"> {{element.language}} </td>
        </ng-container>

        <ng-container matColumnDef="download">
            <th mat-header-cell *matHeaderCellDef>Download</th>
            <td mat-cell *matCellDef="let element" (click)="$event.stopPropagation()">
                <a href="{{element.url}}" download>Download</a>
            </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr class="document-row" mat-row *matRowDef="let row; columns: displayedColumns;" (click)="navigateForDocumentComp(row)"></tr>
        </table>
        <div *ngIf="noDataMessage" class="empty-message">Üres adathalmaz</div>
        <mat-paginator 
        #paginator
        [pageSizeOptions]="[5, 10, 25, 50]"                 
        showFirstLastButtons></mat-paginator>
    </section>
</div>

Answer 1

解决方案，matColumnDef属性必须与对象键相同。

从服务器获取数据后，Angular Material Table排序不起作用

1 个答案: