Angular中mat-select值变更时如何向同行列传递标记或添加自定义内容

我来帮你搞定这个需求！你想要在mat-select选择值变化后，在同行的下一列显示类似“Modified column”的自定义内容，其实很简单，核心思路就是给每行数据加个状态标记，根据标记来控制内容显示，具体步骤如下：

首先来看效果示意图：

步骤1：给每行数据添加状态标记 #

你需要给表格里的每个数据项（也就是你代码里的data对象）添加一个布尔属性，比如isModified，用来标记当前行是否被修改过。如果是从接口获取的数据，你可以在初始化的时候给每条数据加上这个属性：

// 假设你的数据数组是tableData
this.tableData = yourDataSource.map(item => ({
  ...item,
  isModified: false // 初始设为未修改状态
}));

步骤2：修改selectionChange事件处理方法 #

在你的组件.ts文件里，实现selection方法，当用户切换下拉选项时，把当前行的isModified设为true（如果需要切换显示/隐藏，可以改成取反逻辑）：

selection(event: any, data: any) {
  // 这里可以根据需求添加其他业务逻辑，比如更新数据
  data.isModified = true; // 标记当前行为已修改
}

步骤3：在模板中添加自定义内容列 #

在你的表格模板里，对应mat-select的下一列，用*ngIf根据isModified属性来控制自定义内容的显示：

<!-- 假设这是你的表格行结构 -->
<tr *ngFor="let data of tableData">
  <td>
    <mat-form-field>
      <mat-select style="min-width: 150px;" 
                  [(ngModel)]="data.selected_value" 
                  name="configtableDropdown"
                  (selectionChange)="selection($event, data)">
        <mat-option *ngFor="let dropdownValue of data.values" [value]="dropdownValue">
          {{dropdownValue}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </td>
  <!-- 新增的自定义内容列 -->
  <td *ngIf="data.isModified">
    Modified column
  </td>
</tr>

这样一来，只要用户切换了某一行的下拉选项，该行的下一列就会自动显示“Modified column”啦！如果需要实现再次选择后隐藏内容的效果，只需要把data.isModified = true改成data.isModified = !data.isModified即可。

备注：内容来源于stack exchange，提问作者Rohit