如何在Angular 5组件中仅编辑单个字段？附代码示例

The original code uses a single editFlag which would toggle edit mode for all properties at once—here's how to adjust it so you can edit one specific field at a time:

Step 1: Update the Component Class #

Instead of a boolean flag, track which property is being edited using an index (or the property object itself if your list contains complex items). Add methods to start, save, and cancel editing:

import { Component } from '@angular/core';

@Component({
  selector: 'app-property-editor',
  templateUrl: './property-editor.component.html'
})
export class PropertyEditorComponent {
  count = 5;
  propertyList = ['Property A', 'Property B', 'Property C'];
  editingPropIndex: number | null = null; // Tracks the index of the property being edited

  // Start editing a specific property
  startEditing(index: number): void {
    this.editingPropIndex = index;
  }

  // Cancel editing without saving
  cancelEditing(): void {
    this.editingPropIndex = null;
  }

  // Save the edited property value and exit edit mode
  saveEdit(): void {
    if (this.editingPropIndex !== null) {
      // Add validation or API calls here if needed
      this.editingPropIndex = null;
    }
  }

  // Return available options for the select (adjust logic as needed)
  getProps(): string[] {
    return ['Updated Property A', 'Updated Property B', 'Updated Property C'];
  }
}

Step 2: Modify the Template #

Adjust the template to show the edit form only for the selected property, and add per-property Edit/Save/Cancel buttons:

<div *ngIf="count > 0">
  <div *ngFor="let prop of propertyList; let i = index;">
    <!-- Display the property normally if not being edited -->
    <p *ngIf="editingPropIndex !== i">{{ prop }}</p>

    <!-- Show edit form for the selected property -->
    <div *ngIf="editingPropIndex === i">
      <mat-form-field>
        <mat-select [(value)]="propertyList[i]" placeholder="Select property">
          <mat-option *ngFor="let option of getProps()" [value]="option">
            {{ option }}
          </mat-option>
        </mat-select>
      </mat-form-field>
      <button (click)="saveEdit()">Save</button>
      <button (click)="cancelEditing()">Cancel</button>
    </div>

    <!-- Edit button only appears when this property isn't being edited -->
    <button *ngIf="editingPropIndex !== i" (click)="startEditing(i)">Edit</button>
  </div>
</div>

Key Changes Explained: #

• Track specific property: editingPropIndex stores the index of the property being edited (instead of a global boolean), so only that item's edit form is displayed.
• Per-item controls: Each property has its own Edit button, and once editing starts, Save/Cancel buttons replace it.
• Two-way binding: The mat-select uses [(value)] to directly update the propertyList item, making save logic straightforward.

Notes: #

• If your propertyList contains objects (instead of strings), you can track the object reference instead of the index (e.g., editingProp: any | null = null).
• Add validation logic in the saveEdit() method if you need to check input before saving.
• Adjust the getProps() method to return the appropriate options for your use case.

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