how to index with edit button with exact value and then save on index?

Question

I got an issue when I click on edit button. it will edit on all selected data. I need to edit on particular index value but I didn't get that value.

selectedVtuCommands is an array of strings that are selected.

.html file

<div id="vtu-command-div">
  <ul id="selected-command-list" class="list-group">
    <li
      class="list-group-item"
      *ngFor="let command of selectedVtuCommands; let commandIndex = index"
    >
      <div class="mt-2 d-inline-block" *ngIf="!editing">
        {{ command }}
      </div>
      <div id="inputediv" *ngIf="editing">
        <input
          class="mt-2 d-inline-block"
          type="text"
          [(ngModel)]="command"
          [disabled]="!editing"
        />
      </div>

      <button
        (click)="deleteVtuCommand(command)"
        class="btn btn-danger pull-right ml-2"
      >
        <i class="fa fa-trash"></i>
      </button>

      <button
        *ngIf="!editing"
        class="btn btn-danger pull-right"
        (click)="editClick(command, commandIndex)"
      >
        <i class="fa fa-pencil" aria-hidden="true"></i>
      </button>
    </li>
  </ul>
</div>

.ts file

editing: boolean = false;
editClick = (command: string, index: number) => {
  this.logger.trace('editClick() called with command', command);

  this.editing = true;
  if (this.editing) {
    this.logger.trace(
      'before editClick() called with  this.editing',
      this.editing
    );
    const index = this.selectedVtuCommands.findIndex(
      (arg) => arg === command
    );
    this.logger.trace('after click editClick() called with index', index);
  }
  this.logger.trace('editClick() called with  this.editing', this.editing);
};

Answer 1

There are many ways to do this, but in your case you could store an editingIndex instead of a boolean for tracking the editing state and compare that with the current commandIndex in the template.

editingIndex === commandIndex // editing

editingIndex !== commandIndex // not editing

So then in your html template you get something like:

<div id="vtu-command-div">
  <ul id="selected-command-list" class="list-group">
    <li *ngFor="let command of selectedVtuCommands; let commandIndex = index"
        class="list-group-item">
      <div *ngIf="editingIndex !== commandIndex; else editingTemplate"
           class="mt-2 d-inline-block">
        {{ command }}
      </div>
      <ng-template #editingTemplate>
        <div id="inputediv" *ngIf="editingIndex === commandIndex">
          <input
            class="mt-2 d-inline-block"
            type="text"
            [(ngModel)]="command"/>
        </div>
      </ng-template>  
      <button
        (click)="deleteVtuCommand(command)"
        class="btn btn-danger pull-right ml-2">
        <i class="fa fa-trash"></i>
      </button>
      <button
        *ngIf="editingIndex !== commandIndex"
        class="btn btn-danger pull-right"
        (click)="editClick(command, commandIndex)"
      >
        <i class="fa fa-pencil" aria-hidden="true"></i>
      </button>
    </li>
  </ul>
</div>

In your ts file you make following changes:

editingIndex: number;

editClick = (command: string, index: number) => {

  this.editingIndex = index;

};