问材料表在遵循以下指南后不会排序
EN

Stack Overflow用户

提问于 2020-04-27 10:29:29

回答 1查看 113关注 0票数 0

大家好，我一直在努力实现来自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>

component.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.js

angular

angular-material

angular-material-table

边缘安全加速平台EO 1.8折起

边缘节点遍布全球，提供域名解析、动静态智能加速、TCP/UDP 四层加速、DDoS/CC/Web/Bot 防护、边缘函数计算等边缘一体化服务

回答 1

Stack Overflow用户

发布于 2020-04-27 13:39:23

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

1.尝试从排序声明中删除{static: true}。

在订阅中初始化排序。

3.尝试先删除过滤器代码，然后检查排序是否正常工作。4.尝试为您的mat table数据源

添加接口，最终代码将如下所示。

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);
      })
  }

}