html - 当我单击编辑按钮时，我所有的表值都更改为输入框？

Question

我的 HTML 包含 ng for 并且我已经获取了索引值并使用索引值我可以将我的值放入输入框。但是我的所有表列表都显示相同的值并且输入框打开。

<tr *ngFor="let item of items; let i=index">
  <td><input type="checkbox" /></td>
  <td>
    <!-- {{ item.itemName }} -->
    <span *ngIf="!myvar">{{ item.itemName }}</span>
    <span *ngIf="myvar"><input type="text" [(ngModel)]="editUpdate.itemName" name="update.name" (keyup.enter)="UpdateItem()" (keyup.escape)="cancelEditingTodo()"></span>
  </td>
  <td>
    <!-- {{ item.itemType }} -->
    <span *ngIf="!myvar">{{ item.itemType }}</span>
    <span *ngIf="myvar"><input type="text" [(ngModel)]="editUpdate.itemType" name="update.name" (keyup.enter)="UpdateItem()" (keyup.escape)="cancelEditingTodo()"></span>
  </td>
  <td>
    <!-- {{ item.itemDescription }} -->
    <span *ngIf="!myvar">{{ item.itemDescription }}</span>
    <span *ngIf="myvar"><input type="text" [(ngModel)]="editUpdate.itemDescription" name="update.name" (keyup.enter)="UpdateItem()" (keyup.escape)="cancelEditingTodo()"></span>
  </td>
  <td>
    <!-- {{ item.itemCurrentPrice }} -->
    <span *ngIf="!myvar">{{ item.itemCurrentPrice }}</span>
    <span *ngIf="myvar"><input type="text" [(ngModel)]="editUpdate.itemCurrentPrice" name="update.name" (keyup.enter)="UpdateItem()" (keyup.escape)="cancelEditingTodo()"></span>
  </td>
  <td><i class="fa fa-pencil" (click)="editItem(i)" aria-hidden="true"></i></td>
  <td><i class="fa fa-trash" (click)="deleteItem(i)" aria-hidden="true"></i></td>
</tr>

我的ts文件是

editItem(i: number) {
  this.myvar=true;
  this.index=i;
  this.editUpdate=this.items[this.index];
  console.log("edit", this.editUpdate);
}

Answer 1

将 *ngIf= 表达式更改为

 *ngIf="i !== index"
 *ngIf="i === index"