在 angular 中更新 table 中的一行 2

Question

您好，我正在研究 angular 2 在 angular 2 中插入更新和删除行。在 ngFor 中，我将数据绑定到 table。我在 ngFor 循环中创建了更新按钮。

单击特定行 "Update" 按钮后，我只需要该行即可获取文本框，而不是所有行。不幸的是，我正在获取所有记录。我知道它是因为属性绑定到所有行。但是我怎样才能克服以确保只有特定的点击行才能像文本框一样进入编辑模式。我的代码如下：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public enableEdit = true;

  showcreate: boolean=false;
  public items=[];
  public FirstName="";
  public LastName="";
  public MobileNumber="";
  public PinCode="";
  public City=""; 
  public CollageName="";        
  public Percent=""; 
  public conformdelete;
  public edit = false;
  public btncreate =false;
  public indexVal:any;
      constructor(){
        if(localStorage.getItem("items"))
        this.items = JSON.parse(localStorage.getItem("items"))
       }

  delete(index){    
    if(confirm("Are you sure you want to delete this item?") == true){
      this.items.splice(index,1);
      localStorage.setItem("items",JSON.stringify(this.items))
     }
  }
  update(event, index){
    debugger;
    console.log(event);
    console.log(index);
    this.enableEdit = false;
  }
  save(index){
    // console.log("save",i)
    // this.indexVal = i;
    this.enableEdit = true;

  }
  cancel(){

        this.enableEdit = true;
  }

  btnsubmit(){
    this.items.push({
      "FirstName":this.FirstName,
      "LastName":this.LastName,
      "MobileNumber":this.MobileNumber,
      "PinCode":this.PinCode,
      "City":this.City, 
      "CollageName":this.CollageName,                 
       "Percent":this.Percent         

     })
     localStorage.setItem("items",JSON.stringify(this.items))

       }

      }

app.component.html :

<table border="2">
  <thead>
    <tr>
    <th>FirstName</th>
    <th>LastName</th>
    <th>MobileNumber</th>
    <th>PinCode</th>
    <th>City</th>
    <th>CollageName</th>            
    <th>Percent</th>
    <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let i of items; let index = index">
      <td><input *ngIf="!enableEdit" [(ngModel)]="i.FirstName"> <span *ngIf="enableEdit">{{i.FirstName}}</span></td>
      <td><input *ngIf="!enableEdit" [(ngModel)]="i.LastName"> <span *ngIf="enableEdit">{{i.LastName}}</span></td>
      <td><input *ngIf="!enableEdit" [(ngModel)]="i.MobileNumber"> <span *ngIf="enableEdit">{{i.MobileNumber}}</span></td>
      <td><input *ngIf="!enableEdit" [(ngModel)]="i.PinCode"> <span *ngIf="enableEdit">{{i.PinCode}}</span></td>
      <td><input *ngIf="!enableEdit" [(ngModel)]="i.City"> <span *ngIf="enableEdit">{{i.City}}</span></td>        

      <td><input *ngIf="!enableEdit" [(ngModel)]="i.CollageName"> <span *ngIf="enableEdit">{{i.CollageName}}</span></td>                 
      <td><input *ngIf="!enableEdit" [(ngModel)]="i.Percent"> <span *ngIf="enableEdit">{{i.Percent}}</span></td> 
      <td>
        <button *ngIf="enableEdit" (click)="delete(index)">Delete</button>
        <button *ngIf="enableEdit" (click)="update($event,index)" class="update">Update</button>
        <button *ngIf="!enableEdit" (click)="save(index)">save</button>
        <button *ngIf="!enableEdit" (click)="cancel(index)" >cancle</button>
    </td>
    </tr>
  </tbody>
</table>

Answer 1

问题是，当您单击其中一个行按钮时，由于 "enableEdit" 条件对所有行都是通用的，因此它会反映到所有行。一种可能的解决方案是向您的 table 数组添加一个额外的键值对，以便您可以通过使用其索引来使用每一行。

示例：

在你的 component.ts,

constructor(){
        if(localStorage.getItem("items"))
        this.items = JSON.parse(localStorage.getItem("items"));

        /* add an extra key value pair named "edit", and initially set it to false. So all the rows will be showing "Delete" and "Update" buttons initially */
        this.items.forEach(function (eachItem){ 
          eachItem.edit = false;
        });
       }


       /* function for update or cancel functionalities */
       updateCancel(event, index,action:string){
         this.items[index].edit = true; /* selects the items with index number and swaps the buttons*/

         if(action == "cancel"){
           this.items[index].edit = false;
         }
       }

       /* function for save or delete functionalities */
       saveDelete(index, action:string){
         this.items[index].edit = false;

         if(action == "delete"){
           if(confirm("Are you sure you want to delete this item?") == true)
          {
            this.items.splice(index,1);
            this.items[index].edit = true;
            localStorage.setItem("items",JSON.stringify(this.items))
         }
       }

    }

在您的 app.component.html 文件中，使用新函数名称和 if 条件

更改按钮区域 td

   <td>
        <button *ngIf="!i.edit" (click)="saveDelete(index,'delete')">Delete</button>
        <button *ngIf="!i.edit" (click)="updateCancel($event,index,'update')" class="update">Update</button>
        <button *ngIf="i.edit" (click)="saveDelete(index,'save')">Save</button>
        <button *ngIf="i.edit" (click)="updateCancel($event,index,'cancel')">cancel</button>
      </td>

这个解决方案对我有用。谢谢。

在 angular 中更新 table 中的一行 2

updating a row in a table in angular 2

angular2-forms

angular2-template