javascript 如何将编辑值保存在同一索引上而不是另一个索引上?

uxhixvfz  于 2023-01-19  发布在  Java
关注(0)|答案(1)|浏览(170)

我有问题,当我试图保存编辑的值在同一索引,但当我保存的值不可能,因为编辑模式没有关闭。
类型脚本文件
'我需要保存所选命令(项目)中的编辑值。
SelectedVtu命令是保存在此字符串数组中的String[ ]值。

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.selectedVtuCommands.push(command);
      this.logger.trace('command edited  then add in selected VTU-Command', this.selectedVtuCommands);

    }

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

我需要使用HTML保存项目进行编辑

`<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>`
goucqfw6

goucqfw61#

我已经解决了这个问题的答案这是输出时,我想保存项目在同一个索引。
1.请查找索引2.command并在您编辑的索引上

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) {

  //validation for blank command in selected list
  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.indexOf(command);
  this.selectedVtuCommands[index] = command;

  this.selectedVtuCommands.forEach(
    (selectedcommand: string) => {
      if (selectedcommand === command) {
        this.flipVtCommandSelected(command);
      }
    }
  );

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

}

相关问题