如何使用Angular5 Material2从API填充MatTable数据表？

Got it, let's walk through how to replace that hardcoded ELEMENT_DATA with data fetched from an API for your Angular Material Table. Here's a step-by-step guide with practical code examples:

First, we'll move API logic out of your component into a service—this keeps your component focused on UI and follows Angular's single-responsibility principle.

Generate the service via Angular CLI if you haven't already:

ng generate service table-data

Update the service to include a method that fetches your data. Make sure to define an interface that matches your API's response structure (matching your original ELEMENT_DATA):

// table-data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { TableRow } from './table-row.interface';

@Injectable({ providedIn: 'root' })
export class TableDataService {
  private apiEndpoint = 'https://your-api-url-here.com/table-data'; // Replace with your actual API URL

  constructor(private http: HttpClient) {}

  getTableRows(): Observable<TableRow[]> {
    return this.http.get<TableRow[]>(this.apiEndpoint);
  }
}

Define your data interface to mirror the structure of your table rows:

// table-row.interface.ts
export interface TableRow {
  id: number;
  name: string;
  position: string;
  office: string;
  age: number;
  // Add all other properties from your original ELEMENT_DATA here
}

Modify table.component.ts to use the service, replace hardcoded data, and handle loading/error states:

// table.component.ts
import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { TableDataService } from '../table-data.service';
import { TableRow } from '../table-row.interface';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
  displayedColumns: string[] = ['id', 'name', 'position', 'office', 'age']; // Match your column names
  dataSource = new MatTableDataSource<TableRow>();
  isLoading = false;
  errorMsg = '';

  constructor(private tableDataService: TableDataService) {}

  ngOnInit(): void {
    this.loadTableData();
  }

  private loadTableData(): void {
    this.isLoading = true;
    this.errorMsg = '';

    this.tableDataService.getTableRows().subscribe({
      next: (data) => {
        this.dataSource.data = data; // Replace hardcoded data with API response
        this.isLoading = false;
      },
      error: (err) => {
        this.errorMsg = 'Failed to load table data. Please try again later.';
        this.isLoading = false;
        console.error('API Fetch Error:', err);
      }
    });
  }
}

Modify table.component.html to show users what's happening while data loads, or if something goes wrong:

<!-- table.component.html -->
<!-- Loading State -->
<div *ngIf="isLoading" class="loading-wrapper">
  <mat-spinner diameter="40"></mat-spinner>
  <p class="loading-text">Loading table data...</p>
</div>

<!-- Error State -->
<div *ngIf="errorMsg" class="error-box">
  {{ errorMsg }}
</div>

<!-- Table (only show when data is loaded and no errors) -->
<table mat-table [dataSource]="dataSource" *ngIf="!isLoading && !errorMsg">
  <!-- Keep your existing column definitions here -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let row"> {{row.id}} </td>
  </ng-container>

  <!-- Repeat column definitions for all your columns -->

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

Don't forget to add these modules to your AppModule (or a shared module) to make everything work:

// app.module.ts
import { HttpClientModule } from '@angular/common/http';
import { MatTableModule } from '@angular/material/table';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';

@NgModule({
  imports: [
    HttpClientModule, // Required for API calls
    MatTableModule,
    MatProgressSpinnerModule, // For the loading spinner
    // Your other modules...
  ],
  // ...
})
export class AppModule {}

If you want to avoid manual subscription/unsubscription, use Angular's async pipe instead:

// In table.component.ts
tableData$: Observable<TableRow[]>;

ngOnInit(): void {
  this.tableData$ = this.tableDataService.getTableRows();
}

<!-- In table.component.html -->
<table mat-table [dataSource]="tableData$ | async">
  <!-- Column definitions stay the same -->
</table>

The async pipe automatically manages subscriptions and prevents memory leaks—super handy!

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