Angular中如何实现仅选中mat-option的单独编辑功能？

问题根源 #

你目前使用全局布尔值checked控制输入框显示，点击编辑时所有mat-option的*ngIf="checked"都会触发，导致所有选项同时切换到编辑状态。

解决方案 #

改用当前编辑的选项索引来控制单个选项的编辑状态，而非全局变量。以下是修改后的完整代码：

修改后的模板代码

<mat-form-field appearance="outline">
  <mat-select
    [(ngModel)]="selectedFoods"
    (selectionChange)="onChange(selectedFoods)"
  >
    <mat-option
      *ngFor="let food of allfoods; let i = index"
      [value]="food.value"
      style="height:5rem"
      [disabled]="editingIndex === i"
    >
      <!-- 非编辑状态：显示名称和编辑按钮 -->
      <div
        style="display: flex; justify-content: space-between;"
        *ngIf="editingIndex !== i"
      >
        <p>{{ food.viewValue }}</p>
        <a
          (click)="onEdit(i)"
          style="margin-top:1rem;margin-left:3rem"
        >
          <i class="fa fa-pencil"></i>
        </a>
      </div>
      <!-- 仅当前编辑的选项显示输入框 -->
      <div style="display:flex; gap: 0.5rem;" *ngIf="editingIndex === i">
        <input [(ngModel)]="allfoods[i].viewValue" />
        <button (click)="saveEdit()">保存</button>
        <button (click)="cancelEdit()">取消</button>
      </div>
    </mat-option>
  </mat-select>
</mat-form-field>

修改后的组件代码

selectedFoods: any;
editingIndex: number | null = null; // 存储当前编辑的选项索引，null表示无编辑状态

ngOnInit(): void {
  this.selectedFoods = this.allfoods[0].value;
}

allfoods: Food[] = [
  { value: 'steak-0', viewValue: 'Steak' },
  { value: 'pizza-1', viewValue: 'Pizza' },
  { value: 'tacos-2', viewValue: 'Tacos' },
  { value: 'pasta-3', viewValue: 'Pasta' },
];

onChange(ev: any) {
  console.log('changes =>', ev);
}

onEdit(index: number) {
  this.editingIndex = index; // 设置当前编辑的选项索引
}

saveEdit() {
  // 保存逻辑可自行扩展（如发送请求）
  this.editingIndex = null; // 退出编辑状态
}

cancelEdit() {
  // 可添加恢复原内容的逻辑
  this.editingIndex = null; // 退出编辑状态
}

关键优化点 #

1. 用editingIndex替代全局checked，精准控制单个选项的编辑状态
2. 输入框直接绑定到对应选项的viewValue，无需额外的editOption变量
3. 编辑状态下禁用当前选项，避免误操作
4. 增加取消按钮，支持退出编辑流程

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