Angular8中如何用Mat-Table动态处理下拉选择与动态列？

完全理解你要实现的这个动态Mat-Table需求，我来一步步给你拆解怎么做，亲测好用～

1. 先定义列的配置结构 #

首先我们需要用一个配置数组来描述每一列的属性：比如列名、类型（输入框/下拉框/结果列）、下拉选项（如果是下拉列的话）。这样不管列是前端写死还是后端返回，都能统一处理。

先写一个TypeScript接口来规范列配置：

interface ColumnConfig {
  key: string; // 对应数据源对象的属性名
  label: string; // 表头显示的列名
  type: 'input' | 'select' | 'result'; // 列的类型
  options?: { value: string; viewValue: string }[]; // 下拉框的选项，可选
}

然后在组件里定义你的列配置（如果是后端返回，直接把接口数据赋值给这个数组就行）：

columns: ColumnConfig[] = [
  { key: 'productName', label: '产品名称', type: 'input' },
  { key: 'category', label: '产品分类', type: 'select', options: [
    { value: 'electronics', viewValue: '电子产品' },
    { value: 'clothing', viewValue: '服饰' },
    { value: 'food', viewValue: '食品' }
  ]},
  { key: 'price', label: '单价', type: 'input' },
  { key: 'total', label: '总价', type: 'result' }
];
// 提取列的key作为Mat-Table需要的displayedColumns
displayedColumns = this.columns.map(col => col.key);

2. 准备表格数据源 #

数据源可以是一个对象数组，每个对象对应一行数据，属性名要和列配置里的key对应：

dataSource = [
  { productName: '', category: '', price: '', total: '' },
  { productName: '', category: '', price: '', total: '' }
];

3. 在模板中动态渲染列和控件 #

用*ngFor遍历列配置，根据列的type来渲染对应的输入框、下拉框或者结果文本：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- 动态生成每一列的定义 -->
  <ng-container [matColumnDef]="col.key" *ngFor="let col of columns">
    <th mat-header-cell *matHeaderCellDef>{{ col.label }}</th>
    <td mat-cell *matCellDef="let element">
      <!-- 渲染输入框列 -->
      <ng-container *ngIf="col.type === 'input'">
        <input matInput [(ngModel)]="element[col.key]" (input)="calculateTotal(element)">
      </ng-container>
      <!-- 渲染下拉选择框列 -->
      <ng-container *ngIf="col.type === 'select'">
        <mat-select [(ngModel)]="element[col.key]" (selectionChange)="calculateTotal(element)">
          <mat-option *ngFor="let opt of col.options" [value]="opt.value">
            {{ opt.viewValue }}
          </mat-option>
        </mat-select>
      </ng-container>
      <!-- 渲染结果列 -->
      <ng-container *ngIf="col.type === 'result'">
        {{ element[col.key] }}
      </ng-container>
    </td>
  </ng-container>

  <!-- 表头行和数据行 -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

4. 实现结果列的计算逻辑 #

写一个函数来监听输入/选择事件，实时计算结果列的值：

calculateTotal(element: any) {
  // 这里根据你的业务需求写计算逻辑，比如单价*数量（如果有数量列的话）
  // 示例：假设我们给单价加个默认值0，避免NaN
  const price = parseFloat(element.price) || 0;
  // 这里可以根据分类加不同的折扣，举个例子
  const discount = element.category === 'electronics' ? 0.9 : 1;
  element.total = (price * discount).toFixed(2);
}

5. 别忘了导入必要的模块 #

在你的模块文件（比如app.module.ts）里导入Material组件和表单模块，否则功能会失效：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTableModule } from '@angular/material/table';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { FormsModule } from '@angular/forms'; // 用于ngModel双向绑定

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatTableModule,
    MatInputModule,
    MatSelectModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

额外小贴士 #

• 如果列的数量或类型需要完全动态（比如从后端接口获取），只需要把columns数组改成从接口请求赋值即可，逻辑完全通用。
• 如果你的单元格逻辑很复杂，可以把不同类型的单元格抽成独立组件，用ngComponentOutlet或者动态组件来渲染，让代码更易维护。

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