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

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" >
    <li
      
      *ngFor="let command of selectedVtuCommands; let commandIndex = index"
    >
      <div  *ngIf="!editing">
        {{ command }}
      </div>
      <div id="inputediv" *ngIf="editing">
        <input
          
          type="text"
          [(ngModel)]="command"
          [disabled]="!editing"
        />
      </div>

      <button
        (click)="deleteVtuCommand(command)"
        
      >
        <i ></i>
      </button>

      <button
        *ngIf="!editing"
        
        (click)="editClick(command, commandIndex)"
      >
        <i  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);
};

CodePudding user response：

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" >
    <li *ngFor="let command of selectedVtuCommands; let commandIndex = index"
        >
      <div *ngIf="editingIndex !== commandIndex; else editingTemplate"
           >
        {{ command }}
      </div>
      <ng-template #editingTemplate>
        <div id="inputediv" *ngIf="editingIndex === commandIndex">
          <input
            
            type="text"
            [(ngModel)]="command"/>
        </div>
      </ng-template>  
      <button
        (click)="deleteVtuCommand(command)"
        >
        <i ></i>
      </button>
      <button
        *ngIf="editingIndex !== commandIndex"
        
        (click)="editClick(command, commandIndex)"
      >
        <i  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;

};