Angular技术问询：mat-table下拉实现及TypeScript循环赋值方法

实现步骤： #

1. 在表格列中添加下拉菜单
   在mat-table的指定列中嵌入mat-select，绑定选中值和选择事件：

   <ng-container matColumnDef="action">
     <th mat-header-cell *matHeaderCellDef> 操作 </th>
     <td mat-cell *matCellDef="let element">
       <mat-select [(value)]="selectedOption" (selectionChange)="onOptionChange($event)">
         <mat-option value="option1">选项1</mat-option>
         <mat-option value="option2">选项2</mat-option>
       </mat-select>
     </td>
   </ng-container>
   

2. 控制列的显示隐藏
   给需要动态切换的列添加*ngIf，根据选中选项判断是否渲染：

   <!-- 选中option1时显示的列 -->
   <ng-container matColumnDef="col1" *ngIf="selectedOption === 'option1'">
     <th mat-header-cell *matHeaderCellDef> 列1 </th>
     <td mat-cell *matCellDef="let element"> {{element.col1}} </td>
   </ng-container>
   
   <!-- 选中option2时显示的列 -->
   <ng-container matColumnDef="col2" *ngIf="selectedOption === 'option2'">
     <th mat-header-cell *matHeaderCellDef> 列2 </th>
     <td mat-cell *matCellDef="let element"> {{element.col2}} </td>
   </ng-container>
   

3. TypeScript逻辑处理
   在组件类中定义选中变量和事件处理函数，若列是动态数组，直接更新displayedColumns即可：

   selectedOption: string = 'option1';
   displayedColumns: string[] = ['action', 'col1'];
   
   onOptionChange(event: MatSelectChange) {
     this.selectedOption = event.value;
     this.displayedColumns = ['action'];
     this.displayedColumns.push(this.selectedOption === 'option1' ? 'col1' : 'col2');
   }
   

实现代码： #

先定义对应的数据接口（可选但推荐，提升代码可读性）：

interface FollowUpItem {
  CustomerId: string;
  CustomerName: string;
  ProductName: string;
  MacId: string;
  AMCStartDate: string;
  AMCEndDate: string;
  AMCStatus: number;
  FollowStatus: number;
}

interface ApiResponse {
  Info: Array<{
    CustomerId: string;
    CustomerName: string;
    followUpLists: FollowUpItem[];
  }>;
  Status: boolean;
  Message: string;
}

然后用for循环遍历数据并合并到目标数组：

// 假设API响应已存入response变量
const response: ApiResponse = { /* 你的API返回数据 */ };
const FollowList: FollowUpItem[] = [];

// 方式1：普通for循环
for (let i = 0; i < response.Info.length; i++) {
  const customerInfo = response.Info[i];
  for (let j = 0; j < customerInfo.followUpLists.length; j++) {
    FollowList.push(customerInfo.followUpLists[j]);
  }
}

// 方式2：for...of循环（更简洁）
for (const customerInfo of response.Info) {
  for (const item of customerInfo.followUpLists) {
    FollowList.push(item);
  }
}

若需要去重，可根据MacId或CustomerId+ProductName等唯一字段判断后再执行push操作。

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