Angular 5实现表格特定行按钮随复选框切换显示的方法

嘿，作为Angular新手遇到这个需求很正常，我来一步步帮你实现～核心思路是给每个表格行对应的配置项加一个状态标记，用来控制按钮的显示/隐藏，再配合复选框的变化事件来触发状态切换。

步骤1：给配置项添加状态属性 #

首先，我们需要给configurationList里的每个项添加两个属性：一个控制按钮显示的showButtons，另一个用来保存复选框初始状态的originalData（方便取消时恢复）。

在组件的ngOnInit（或者你获取数据的回调里）添加这段代码：

ngOnInit() {
  // 假设configurationList已经初始化或从API获取到了
  this.configurationList.forEach(config => {
    config.showButtons = false; // 默认隐藏按钮
    config.originalData = config.data; // 保存复选框的初始状态
  });
}

如果你用了TypeScript接口定义Configuration，记得把这两个属性加进去避免类型报错：

interface Configuration {
  id: number;
  label: string;
  data: boolean;
  showButtons?: boolean;
  originalData?: boolean;
}

步骤2：修改复选框的change事件处理 #

更新你的onCheckedChange方法，当复选框状态变化时，把当前行的showButtons设为true，这样按钮就会显示出来：

onCheckedChange(event: MatCheckboxChange, configuration: any) {
  configuration.showButtons = true;
  // 这里可以保留你原本的其他业务逻辑
}

步骤3：在模板中添加并控制按钮显示 #

在表格行的合适位置（比如新增一列）添加保存和取消按钮，用*ngIf绑定showButtons来控制显示：

<tr *ngFor="let configuration of configurationList;">
  <td>{{configuration.label}}</td>
  <td class="text-center">
    <mat-checkbox color='primary' 
                  name="{{configuration.id}}" 
                  [checked]="configuration.data" 
                  [(ngModel)]="configuration.data" 
                  (change)="onCheckedChange($event,configuration)">
    </mat-checkbox>
  </td>
  <!-- 新增按钮列 -->
  <td>
    <ng-container *ngIf="configuration.showButtons">
      <button mat-button color="primary" (click)="saveConfig(configuration)">保存</button>
      <button mat-button color="warn" (click)="cancelConfig(configuration)">取消</button>
    </ng-container>
  </td>
</tr>

步骤4：实现保存和取消的逻辑 #

最后在组件类里添加两个方法，处理保存和取消的操作：

saveConfig(configuration: any) {
  // 这里写你的保存逻辑，比如调用API提交修改
  console.log('保存配置:', configuration);
  
  // 保存成功后更新初始值，隐藏按钮
  configuration.originalData = configuration.data;
  configuration.showButtons = false;
}

cancelConfig(configuration: any) {
  // 恢复复选框的初始状态，隐藏按钮
  configuration.data = configuration.originalData;
  configuration.showButtons = false;
}

这样一来，当你点击某行的复选框改变状态时，该行的保存和取消按钮就会自动显示；点击保存会提交修改并隐藏按钮，点击取消则会恢复初始状态并隐藏按钮～

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