如何仅在模板驱动形式 Angular 12 中单击编辑时才编辑 table 行？

Question

我有我的 table，即 editable，方法是单击 hyperlink 和一个按钮来保存更新的数据。我单击编辑，我想要发生的是在该行上单击编辑 link 的行将是 editable。现在我的问题是，当单击编辑时，所有行都是 editable。我包括了 html 和我用来编辑 table 行的打字稿。

html

   <tbody>
        <tr *ngFor="let user of displayForm.users; let i = index" >
          <th scope ="row">{{ i + 1 }} </th>
          <td [contentEditable]="isEditable" (input)="saveEdit($event, user.firstName); this.userNum=1"> {{user.firstName}} </td>
          <td [contentEditable]="isEditable" (input)="saveEdit($event, user.firstName); this.userNum=2"> {{user.lastName}} </td>
          <td [contentEditable]="isEditable" (input)="saveEdit($event, user.firstName); this.userNum=3"> {{user.sex}} </td>
          <td [contentEditable]="isEditable" (input)="saveEdit($event, user.firstName); this.userNum=4"> {{user.birthday | date}} </td>
          <td>
              <button *ngIf= "this.enableEdit && this.enableEditIndex == i" (click)="enableEdit=false; isEditable=false" class = "btn" ng-click = "cancel()">Cancel</button>
              <button *ngIf= "this.enableEdit && this.enableEditIndex == i" id = "saveBtn" class="btn" (click)="submitEdit(i); enableEdit=false" type = "submit">Save</button> 
          <p> <a [routerLink]="" class="table-row-action edit-action" *ngIf="!enableEdit" (click)="enableEditing($event, i)">
                         edit
              </a> </p>
                  </td>
        </tr>
    </tbody>

ts

  
    enableEditing(e: any,i: any){
        this.enableEdit = true;
        this.enableEditIndex = i;
        console.log(i,e);
        console.log("before assignment: " + this.isEditable);
        this.isEditable = true;
        console.log("after assignment: " + this.isEditable);
    }
    
    saveEdit(event: any, name: string){
        this.editUser = event.target.outerText as string;
        this.editName = name;
    }
    
    submitEdit(index: number){
      switch(this.userNum)
      {
        case 1:
        //only assign the data if it is the row we are editing
        //only did it for this case statement because I was testing if it would work
            if(this.displayForm.users[index].firstName == this.editName)
            {
                this.displayForm.users[index].firstName = this.editUser;
                break;
            }
            else
            {
             this.isEditable = false;   
             break;
            }
        case 2:
            this.displayForm.users[index].lastName = this.editUser;
            break;
        case 3:
            this.displayForm.users[index].sex = this.editUser;
            break;
        case 4:
            let userDate = new Date(this.editUser);
            this.displayForm.users[index].birthday = userDate;
            break;
      } 
      
      console.log(this.displayForm.users);
    }

Answer 1

我认为 [contentEditable] 指令使您的行可编辑，在这种情况下，条件还应考虑行的索引。

你应该尝试改变

<td [contentEditable]="isEditable" ...

变成类似

的东西

<td [contentEditable]="isEditable && enableEditIndex === i" ...

如何仅在模板驱动形式 Angular 12 中单击编辑时才编辑 table 行？

How to edit table row only when edit is clicked in template-driven form Angular 12?

html

typescript

angular2-template

angular

angular12