Angular 5 Material可排序列表头员工表格组件开发需求问询

Let's build this Angular 5 Material employee table component with all the features you need—sortable headers, show/hide toggle, and support for both hardcoded data and API integration. Here's a complete breakdown:

Prerequisites #

First, make sure you have Angular Material set up in your Angular 5 project, and import the required modules in your app module:

import { MatTableModule, MatSortModule, MatButtonModule } from '@angular/material';
import { HttpClientModule } from '@angular/common/http'; // For API calls

@NgModule({
  imports: [
    // ... other existing imports
    MatTableModule,
    MatSortModule,
    MatButtonModule,
    HttpClientModule
  ]
})
export class AppModule { }

1. Component with Hardcoded JSON Data #

Template (employee-list.component.html) #

<button mat-raised-button (click)="toggleTableVisibility()" class="toggle-btn">
  {{ isTableVisible ? 'Hide Employees' : 'Show Employees' }}
</button>

<div *ngIf="isTableVisible" class="table-container">
  <table mat-table [dataSource]="dataSource" matSort>
    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> *Employee Name* </th>
      <td mat-cell *matCellDef="let emp"> {{ emp.name }} </td>
    </ng-container>

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Position </th>
      <td mat-cell *matCellDef="let emp"> {{ emp.position }} </td>
    </ng-container>

    <!-- Department Column -->
    <ng-container matColumnDef="department">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Department </th>
      <td mat-cell *matCellDef="let emp"> {{ emp.department }} </td>
    </ng-container>

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

Component Class (employee-list.component.ts) #

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatSort, MatTableDataSource } from '@angular/material';

// Define Employee interface for type safety
export interface Employee {
  name: string;
  position: string;
  department: string;
}

@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {
  displayedColumns: string[] = ['name', 'position', 'department'];
  dataSource: MatTableDataSource<Employee>;
  isTableVisible = true; // Start with table visible by default

  // Hardcoded mock employee data
  private mockEmployees: Employee[] = [
    { name: 'Liam Wilson', position: 'Senior Frontend Dev', department: 'Engineering' },
    { name: 'Olivia Davis', position: 'Product Lead', department: 'Product' },
    { name: 'Noah Brown', position: 'UX/UI Designer', department: 'Design' },
    { name: 'Emma Garcia', position: 'QA Engineer', department: 'Quality Assurance' }
  ];

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

  ngOnInit(): void {
    this.dataSource = new MatTableDataSource(this.mockEmployees);
    this.dataSource.sort = this.sort;
  }

  toggleTableVisibility(): void {
    this.isTableVisible = !this.isTableVisible;
  }
}

2. Switching to Web Service/API Data #

To replace the hardcoded data with a real API, modify the component class to use HttpClient for data fetching:

Updated Component Class Snippet #

import { HttpClient } from '@angular/common/http';

// ... keep the interface and other existing imports

@Component({
  // ... component metadata remains the same
})
export class EmployeeListComponent implements OnInit {
  // ... existing properties

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    // Fetch data from API instead of using mock data
    this.fetchEmployeesFromAPI();
  }

  private fetchEmployeesFromAPI(): void {
    // Replace with your actual API endpoint
    this.http.get<Employee[]>('https://your-api-domain.com/api/employees')
      .subscribe({
        next: (employees) => {
          this.dataSource = new MatTableDataSource(employees);
          this.dataSource.sort = this.sort;
        },
        error: (err) => console.error('Failed to load employee data:', err)
      });
  }

  // ... toggleTableVisibility method stays unchanged
}

3. Basic Styling (Matching Example Image) #

Add this to employee-list.component.css for a clean, polished look:

.toggle-btn {
  margin: 1rem 0;
}

.table-container {
  width: 100%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.mat-header-cell {
  background-color: #f0f0f0;
  font-weight: 600;
}

.mat-row:hover {
  background-color: #fafafa;
}

Quick Notes #

• The mat-sort-header directive automatically enables ascending/descending sorting for each column—just click the header to sort.
• The button text updates dynamically based on the table's visibility state, controlled by the isTableVisible boolean.
• Ensure your Angular Material version is v5.x to match Angular 5 compatibility.

内容的提问来源于stack exchange，提问作者user9541762