如何在无模型情况下实现Angular Material Table动态列？

Since you can’t predict the exact structure of the data coming from your server, building a fully dynamic Material Table is the right call. Let’s flesh out your approach to make it robust and functional:

Step 1: Component Setup #

First, define your component properties and fetch/process the data dynamically. Here’s how to complete your code example:

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTable } from '@angular/material/table';
import { MatTableDataSource } from '@angular/material/table';
import { ListeciServis } from './path-to-your-service'; // Adjust the import path

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
  @ViewChild(MatTable) table!: MatTable<any>;
  dataSource = new MatTableDataSource<any>([]);
  displayedColumns: string[] = [];
  
  listecidenKisi: any[] = [];
  listecidenVazife: any[] = [];

  constructor(private listeciServis: ListeciServis) { }

  ngOnInit(): void {
    // Fetch your datasets from the service (adjust if using async calls like HttpClient)
    this.listecidenKisi = this.listeciServis.listecidenKisi;
    this.listecidenVazife = this.listeciServis.listecidenVazife;

    // Combine the two arrays into a single dataset for the table
    // Tweak this logic if your data needs to be merged differently
    const tableData = this.listecidenKisi.map((kisi, index) => ({
      ...kisi,
      ...this.listecidenVazife[index]
    }));

    // Dynamically set columns from the first object's keys (only if data exists)
    if (tableData.length > 0) {
      this.displayedColumns = Object.keys(tableData[0]);
    }

    // Assign processed data to the table source
    this.dataSource.data = tableData;

    // Force table refresh to reflect dynamic changes
    if (this.table) {
      this.table.renderRows();
    }
  }
}

Step 2: Template with Dynamic Columns #

In your component’s template, use *ngFor to generate columns based on the displayedColumns array:

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- Generate dynamic column definitions -->
  <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
    <th mat-header-cell *matHeaderCellDef> {{ column | titlecase }} </th>
    <td mat-cell *matCellDef="let element"> 
      <!-- Add custom formatting here if needed (e.g., dates, currency) -->
      {{ element[column] }} 
    </td>
  </ng-container>

  <!-- Header and data rows -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<!-- Optional: Show empty state when no data exists -->
<div *ngIf="dataSource.data.length === 0" class="empty-state">
  No data available to display
</div>

Key Notes for Edge Cases #

• Empty Data: Always handle empty datasets with a friendly message (like the optional empty state above) to avoid a confusing empty table.
• Custom Field Formatting: If some fields need special treatment (e.g., dates, currency), add conditional logic in the template. For example:

  <td mat-cell *matCellDef="let element">
    <span *ngIf="column === 'birthDate'">{{ element[column] | date:'shortDate' }}</span>
    <span *ngIf="column === 'salary'">{{ element[column] | currency }}</span>
    <span *ngIf="column !== 'birthDate' && column !== 'salary'">{{ element[column] }}</span>
  </td>
  

• Sorting/Filtering: You can still add dynamic sorting or filtering by connecting a MatSort component or updating the dataSource’s filter predicate—just ensure it works with unknown field names.

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