Angular 5 Material Table 可排序 Headers

Question

我最近的任务是创建一个以 table 格式显示员工列表的组件，首先使用来自硬编码 JSON 数据 object 的数据，以及如何使用网络服务中的数据来完成。此外，需要包含一个标记为 'Show(/Hide)' 员工的按钮，允许用户切换员工列表 table，按钮的值基于员工的可见性 table。 table 应该是这样的：

Employee Data Table Example image

现在我立即上网并开始查看有关 Angular 数据 table 的教程，看看是否有人尝试过类似的事情，因为当然有人做过。我发现并跟随了这个：https://www.youtube.com/watch?v=NSt9CI3BXv4. This tutorial is doing exactly what I need and using a web service to do it. (By the way this tutorial uses the prefix 'user' for directory and file naming but I use the prefix 'employee' since the component I'm tasked to develop is about employees.) I am able to get all the way through this tutorial, but at the end, the data from the web service is not displaying in the table for me. When I check the network results I see the data is being returned from the web service, it just isn't displaying for some reason. I will post what I think you most likely want to see, and I will add to this post whatever you need to see, but the entire code base is available at my github repo https://github.com/cmazzochi81/employeeApp

谢谢，感谢您的宝贵时间，厘米

employee-table.component.html

<div>
  <mat-table [dataSource] = "dataSource">
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
      <mat-cell *matCellDef="let employee">{{employee.name}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="username">
      <mat-header-cell *matHeaderCellDef>Username</mat-header-cell>
      <mat-cell *matCellDef="let employee">{{employee.username}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef>Email</mat-header-cell>
      <mat-cell *matCellDef="let employee">{{employee.email}}</mat-cell>
    </ng-container>

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

employee-table-component.ts

import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {MatSort, MatSortable, MatTableDataSource} from '@angular/material';
import {EmployeeService} from '../employee.service';

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

  dataSource;
  displayedColumns = ['name', 'username', 'email'];

  constructor(private employeeService: EmployeeService) { }

  ngOnInit() {
    this.employeeService.getEmployee().subscribe(results => {
      if(!results){

        return;
      }
      this.dataSource = new MatTableDataSource(results);
    })
  }

}

employee.service.ts

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Employee} from './models/employee.model';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class EmployeeService {

private serviceUrl = "https://jsonplaceholder.typicode.com/users";

constructor(private http: HttpClient) { }

getEmployee():Observable<Employee[]>{
    return this.http.get<Employee[]>(this.serviceUrl);
}
}

employee.model.ts

export interface Employee {
    name:string;
    username:string;
    email:string;

}

Answer 1

问题出在您的html：

您正在 mat-header-row 中定义 mat-row，如您所见：

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

正确的方法是：

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

您必须在开始 mat-row 声明之前关闭 mat-header-row。

看看here

Angular 5 Material Table 可排序 Headers

Angular 5 Material Table with Sortable Headers

angular-datatables

angular