Angular Material中如何从表格列动态生成多选下拉选项

1. 父组件核心逻辑（数据管理+动态提取唯一代理名） #

父组件作为数据中枢，负责维护原始经销商数据、提取唯一代理姓名列表，并处理筛选逻辑。

代码示例（父组件 TS） #

import { Component, OnInit } from '@angular/core';
import { Dealer } from './models/dealer.model'; // 自定义经销商数据模型

@Component({
  selector: 'app-dealer-container',
  templateUrl: './dealer-container.component.html'
})
export class DealerContainerComponent implements OnInit {
  // 原始经销商数据（可替换为API请求返回数据）
  originalDealers: Dealer[] = [
    { id: 1, agent_name: '张三', product: '产品A' },
    { id: 2, agent_name: '李四', product: '产品B' },
    { id: 3, agent_name: '张三', product: '产品C' },
    { id: 4, agent_name: '王五', product: '产品D' }
  ];

  agentsList: string[] = []; // 动态生成的唯一代理姓名列表
  selectedAgents: string[] = []; // 选中的代理姓名
  filteredDealers: Dealer[] = []; // 筛选后传给表格的数据

  ngOnInit(): void {
    // 提取唯一代理姓名，过滤空值避免无效选项
    this.agentsList = Array.from(new Set(this.originalDealers.map(dealer => dealer.agent_name)))
      .filter(name => name?.trim().length > 0);
    // 初始化显示全部数据
    this.filteredDealers = [...this.originalDealers];
  }

  // 接收筛选组件的选中结果，执行筛选
  onAgentsSelected(selectedNames: string[]): void {
    this.selectedAgents = selectedNames;
    this.filteredDealers = selectedNames.length === 0 
      ? [...this.originalDealers]
      : this.originalDealers.filter(dealer => selectedNames.includes(dealer.agent_name));
  }
}

父组件 HTML #

<!-- 筛选子组件 -->
<app-agent-filter 
  [agentsList]="agentsList"
  (selectedAgentsChange)="onAgentsSelected($event)"
></app-agent-filter>

<!-- 表格子组件 -->
<app-dealer-table 
  [dealers]="filteredDealers"
></app-dealer-table>

2. 筛选子组件（多选下拉框） #

接收父组件传来的代理列表，提供多选交互，并将选中结果回传给父组件。

代码示例（筛选组件 TS） #

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-agent-filter',
  templateUrl: './agent-filter.component.html'
})
export class AgentFilterComponent {
  @Input() agentsList: string[] = [];
  @Output() selectedAgentsChange = new EventEmitter<string[]>();

  selectedAgents: string[] = [];

  // 选中项变化时通知父组件
  onSelectionChange(): void {
    this.selectedAgentsChange.emit(this.selectedAgents);
  }
}

筛选组件 HTML #

<mat-form-field appearance="fill">
  <mat-label>选择代理姓名</mat-label>
  <mat-select 
    [value]="selectedAgents"
    (selectionChange)="onSelectionChange()"
    multiple
  >
    <mat-option *ngFor="let agent of agentsList" [value]="agent">
      {{ agent }}
    </mat-option>
  </mat-select>
</mat-form-field>

3. 表格子组件（Angular Material表格） #

接收父组件传来的筛选后数据，渲染表格内容。

代码示例（表格组件 TS） #

import { Component, Input } from '@angular/core';
import { Dealer } from './models/dealer.model';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-dealer-table',
  templateUrl: './dealer-table.component.html'
})
export class DealerTableComponent {
  @Input() set dealers(dealers: Dealer[]) {
    this.dataSource.data = dealers;
  }

  dataSource = new MatTableDataSource<Dealer>();
  displayedColumns: string[] = ['id', 'agent_name', 'product']; // 可根据实际列调整
}

表格组件 HTML #

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- ID列 -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef>ID</th>
    <td mat-cell *matCellDef="let element">{{ element.id }}</td>
  </ng-container>

  <!-- 代理姓名列 -->
  <ng-container matColumnDef="agent_name">
    <th mat-header-cell *matHeaderCellDef>代理姓名</th>
    <td mat-cell *matCellDef="let element">{{ element.agent_name }}</td>
  </ng-container>

  <!-- 产品列 -->
  <ng-container matColumnDef="product">
    <th mat-header-cell *matHeaderCellDef>产品</th>
    <td mat-cell *matCellDef="let element">{{ element.product }}</td>
  </ng-container>

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

关键注意点 #

• 若数据为异步获取（比如API请求），需在数据返回后再执行唯一姓名提取逻辑，例如放在subscribe回调内
• 提取唯一值时过滤空字符串/undefined，避免下拉框出现无效选项
• 筛选逻辑集中在父组件，保证数据流向清晰，子组件仅负责展示和传递事件

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