Question

大家好，我一直在尝试实施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);
      })
  }

}

Answer 1

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

1。尝试从sort声明中删除{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);
      })
  }

}

请检查其是否有效

物料表不会按照以下指南排序

1 个答案: