时间戳

首页 > 解决方案 > 遵循指南后，材料表不会排序

node.js - 遵循指南后，材料表不会排序

问题描述

大家好，我一直在尝试实施https://material.angular.io/components/table/overview中的指南

我正在尝试对表格进行排序，但是当我点击表格标题时没有任何反应，你们能看到我的代码中缺少什么吗？如果我的代码不正确，还有任何建议，这是我第一次玩材料表。

html:

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

   <ng-container matColumnDef="asset">
     <th mat-header-cell *matHeaderCellDef> Asset </th>
     <td mat-cell *matCellDef="let element"> <img width="30px" [src]="element.asset"> </td>
   </ng-container>

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

   <tr mat-header-row *matHeaderRowDef="displayedColumns;"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

组件.ts：

import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {MatSort} from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-crew',
  templateUrl: './crew.component.html',
  styleUrls: ['./crew.component.css']
})
export class CrewComponent implements OnInit {

  @ViewChild(MatSort, {static: true}) sort: MatSort;

  appName = 'title';

  dataList = new MatTableDataSource();
  displayedColumns: string[] = ['asset', 'name'];
  isLoading = true;

  constructor(
    private http: HttpClient,
  ) { }

  ngOnInit() {
    this.getRemoteData();
    this.dataList.sort = this.sort;
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataList.filter = filterValue.trim().toLowerCase();
  }

  getRemoteData() {
    this.http
      .get<any>(http://someapi.api)
      .subscribe((response) => {
        this.isLoading = false;
        this.dataList.data = response.data;
      }, error => {
        console.log(error);
      })
  }

}

标签： node.jsangularangular-materialangular-material-table

解决方案

首先，如果要对两列进行排序，请在两列上添加mat-sort-header。

1.尝试从排序声明中删除 {static: true}。
2. 在订阅中初始化您的排序。
3.尝试先删除过滤器代码，然后检查排序是否正常。4.尝试为您的mat表数据源添加接口
4.您的最终代码将如下所示。 

import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {MatSort} from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';

export interface crewElement{
  name: string;
  asset: string;
  }


@Component({
  selector: 'app-crew',
  templateUrl: './crew.component.html',
  styleUrls: ['./crew.component.css']
})
export class CrewComponent implements OnInit {

  @ViewChild(MatSort) sort: MatSort;

  appName = 'title';

  dataList = new MatTableDataSource<crewElement>();
  displayedColumns: string[] = ['asset', 'name'];
  isLoading = true;

  constructor(
    private http: HttpClient,
  ) { }

  ngOnInit() {
    this.getRemoteData();
  }

  // applyFilter(event: Event) {
   // const filterValue = (event.target as HTMLInputElement).value;
  //  this.dataList.filter = filterValue.trim().toLowerCase();
 // }

  getRemoteData() {
    this.http
      .get<any>(http://someapi.api)
      .subscribe((response) => {
        this.isLoading = false;
        this.dataList =MatTableDataSource<crewElement>(response.data); //please try this
    this.dataList.sort = this.sort;
      }, error => {
        console.log(error);
      })
  }

}

请检查它是否有效

推荐阅读