Таблица материалов не сортируется после следующего руководства

Question

Привет всем, я пытался реализовать руководство из https://material.angular.io/components/table/overview

Я пытаюсь отсортировать свою таблицу, но когда я go нажимаю на заголовок таблицы, ничего не происходит, ребята, вы видите что-то, чего мне не хватает в моем коде? И любые предложения, если мой код неверен, я впервые играю с таблицами материалов.

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. Попробуйте удалить {stati c: true} из объявления of sort.
2. Инициализируйте сортировку в подписке.
3. Попробуйте сначала удалить код фильтра, а затем проверьте, работает ли сортировка. 4.Попробуйте добавить интерфейс для вашего источника данных таблицы матов
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);
      })
  }

}

Пожалуйста, проверьте, работает ли он или нет