how to save edited value on same index not on another index?
Tags: angular
Published: 2023-01-17 17:14:20

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

    this.editingIndex = index;
    this.logger.trace('editClick() called with  this.editingIndex', this.editingIndex);

    this.flipVtCommandSelected(command);

    this.logger.trace('editClick() returning');

  };

  saveCommand = (command: string, index: number) => {
    this.logger.trace('saveCommand() called with command, index', command, index);
    this.editingIndex = -1;
    this.logger.trace('saveCommand() called with this.editingIndex', this.editingIndex);
   if (this.editingIndex) {
     

      //then remove command from selted List
      //this.selectedVtuCommands.splice(index, 1);

      //command === LiveComponent.BLANK_STRING
      // validation for blank command
      if (!command || !command.trim()) {
        this.showAddVtuCommandErrorMessage();
        this.logger.trace('command is not valid, saveCommand() returning');
        return;
      }

      //validation for already present command in selected list
      this.selectedVtuCommands.forEach(
        (selectedcommand: string) => {
          if (selectedcommand === command) {
            this.showAlreadyPresentVtuCommandErrorMessage();
            this.logger.trace('command is already present, saveCommand() returning');
            return;
          } 
        }
      );

     
      this.selectedVtuCommands = this.selectedVtuCommands.filter(arg => arg !== command);
      this.logger.trace('check selectedcommands not similar with edited command then get selectedVtuCommands', this.selectedVtuCommands);

      this.selectedVtuCommands.push(command);
      this.logger.trace('command edited  then add in selected VTU-Command', this.selectedVtuCommands);

    }

    this.logger.trace('saveCommand() returning');
  }`

``<div id="vtu-command-div">  
<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="inputdiv" *ngIf="editingIndex ===commandIndex">
                                            
<textarea id="textareadiv" class="mt-2 d-inline-block" [(ngModel)]="command"></textarea>
                                            
<button id="text-area-button-div" *ngIf="editingIndex === commandIndex" class="btn btn-secondary pull-right" (click)="saveCommand(command, commandIndex)">
                                               
 <i class="fa fa-save"></i>
                                         
   </button>
                                       
 </div>
                                       
             </ng-template>

                                    
<button *ngIf="editingIndex !== commandIndex" (click)="deleteVtuCommand(command)"
 class="btn btn-secondary pull-right ml-2">
                                        
<i class="fa fa-trash"></i>
                                   
 </button>

                                    
<button *ngIf="editingIndex !== commandIndex"
 class="btn btn-secondary pull-right" (click)="editClick(command, commandIndex)">
                                        
<i class="fa fa-pencil" aria-hidden="true"></i>
                                    
</button>

                                    

                              
  </li>
                           
 </ul>
                       
 </div>``