Angular:如何处理angular材料表中的空值

// 假设这是你的数据源
const data = [
  { name: 'Alice', age: 30, address: null },
  { name: 'Bob', age: null, address: '123 Main St' },
  { name: 'Charlie', age: 25, address: '456 Elm St' }
];

// 预处理数据，将空值替换为空字符串
const processedData = data.map(item => ({
  ...item,
  age: item.age === null ? '' : item.age,
  address: item.address === null ? '' : item.address
}));

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-root',
  template: `
    <mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
      </ng-container>
      <ng-container matColumnDef="age">
        <th mat-header-cell *matHeaderCellDef> Age </th>
        <td mat-cell *matCellDef="let element"> {{element.age | number: '1.2-2'}} </td>
      </ng-container>
      <ng-container matColumnDef="address">
        <th mat-header-cell *matHeaderCell def> Address </th>
        <td mat-cell *matCellDef="let element"> {{element.address}} </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </mat-table>
  `
})
export class AppComponent {
  displayedColumns: string[] = ['name', 'age', 'address'];
  dataSource = new MatTableDataSource(this.processedData);

  processedData = [
    { name: 'Alice', age: '', address: '' },
    { name: 'Bob', age: '', address: '123 Main St' },
    { name: 'Charlie', age: '25', address: '456 Elm St' }
  ];
}

/* 在你的组件样式文件中 */
.mat-cell[matCellDef="age"]:empty::before {
  content: 'N/A';
}