Angular 5中如何在Material表格每列添加mat-select组件

没问题，我来帮你实现这个需求！结合你给出的代码片段，我整理了完整的实现步骤和示例，确保每一行的下拉选择都是独立且能正确关联到对应数据的：

1. 完善组件类逻辑（table.component.ts） #

先定义表格数据的接口，准备好数据源和下拉选项列表，再添加选择变化的处理方法：

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

// 定义表格每行数据的接口，包含存储下拉选择值的字段
interface MedicalInstrument {
  instrumentName: string;
  selectedCategory: string;
  status: string;
}

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent {
  // 要显示的列名，包含我们要加下拉框的列
  displayedColumns: string[] = ['instrumentName', 'category', 'status'];
  // 表格数据源，初始化一些示例数据
  dataSource = new MatTableDataSource<MedicalInstrument>([
    { instrumentName: 'Thermometer', selectedCategory: 'Digital', status: 'Available' },
    { instrumentName: 'Stethoscope', selectedCategory: 'Electronic', status: 'In Use' },
    { instrumentName: 'Blood Pressure Monitor', selectedCategory: 'Automatic', status: 'Available' }
  ]);
  // mat-select的选项列表，你可以根据业务需求修改
  categoryOptions: string[] = ['Digital', 'Electronic', 'Manual', 'Automatic'];

  // 处理下拉选择变化的方法，拿到当前行和新选中的值
  onCategoryChange(row: MedicalInstrument, newCategory: string) {
    row.selectedCategory = newCategory;
    // 这里可以添加你的业务逻辑，比如提交到后端、更新状态等
    console.log(`Updated ${row.instrumentName}'s category to: ${newCategory}`);
  }
}

2. 修改表格模板（table.component.html） #

在你现有的模板基础上，添加带mat-select的列定义，或者修改现有列的单元格内容：

<section class="intella-container">
  <mat-toolbar class="intella-inst-header">
    <p>Medical Instrument List</p>
    <button class="button-box"><i class="material-icons">add_box</i></button>
  </mat-toolbar>
  
  <mat-table [dataSource]="dataSource" class="data-table">
    <!-- 仪器名称列（你的原有代码） -->
    <ng-container matColumnDef="instrumentName">
      <mat-header-cell *matHeaderCellDef> Instrument Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.instrumentName}} </mat-cell>
    </ng-container>

    <!-- 带mat-select的分类列 -->
    <ng-container matColumnDef="category">
      <mat-header-cell *matHeaderCellDef> Category </mat-header-cell>
      <mat-cell *matCellDef="let element">
        <mat-select 
          [(ngModel)]="element.selectedCategory"
          (selectionChange)="onCategoryChange(element, $event.value)"
          placeholder="Select Category"
          class="select-cell">
          <mat-option *ngFor="let category of categoryOptions" [value]="category">
            {{category}}
          </mat-option>
        </mat-select>
      </mat-cell>
    </ng-container>

    <!-- 状态列（示例） -->
    <ng-container matColumnDef="status">
      <mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.status}} </mat-cell>
    </ng-container>

    <!-- 渲染表头和表格行 -->
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</section>

3. 确保模块导入了必要的依赖 #

别忘了在你的模块文件（比如table.module.ts或者app.module.ts）里导入Angular Material相关模块和FormsModule（因为用到了ngModel双向绑定）：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

// Angular Material模块
import { MatTableModule } from '@angular/material/table';
import { MatSelectModule } from '@angular/material/select';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

import { TableComponent } from './table.component';

@NgModule({
  declarations: [TableComponent],
  imports: [
    CommonModule,
    FormsModule,
    MatTableModule,
    MatSelectModule,
    MatToolbarModule,
    MatButtonModule,
    MatIconModule
  ]
})
export class TableModule { }

关键注意点 #

• 独立数据绑定：每个mat-select通过[(ngModel)]绑定到当前行数据的属性，这样每一行的选择值都会独立存储，不会互相干扰。
• 事件监听：用(selectionChange)监听选择变化，能直接拿到当前行对象和新选中的值，方便后续处理业务逻辑。
• 样式调整：如果需要，可以给mat-select添加自定义类（比如示例中的select-cell）来调整单元格内下拉框的大小和样式，适配你的表格布局。

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