如何更新 table 中的多行？ Angular 7

Question

在我的项目中，有一个弹出窗口包含循环中的多个值。

每一行都包含将文本转换为文本框的启用按钮，页面末尾有一个按钮名称 "Update"。然后所有启用行值都作为 API 参数，并且然后更新所有行。下面这个页面具有相同的功能，但这是在 angular js 中。 https://embed.plnkr.co/plunk/2Fue9L

Answer 1

一个非常简单的formArray。一如既往，我们有一个创建 formGroup 和一些辅助变量的函数

  editing: number = -1; //<--here store the row we are editing
                        //typically we initialize the variable with "-1"
                        //to say that there are no rows selected
  formArray: FormArray = new FormArray([]); //<--our formArray, 
        //At first is empty, but NOT null, see =new FormArray([])
  oldValue: any; //<--here store the old values, this allows us
       //recover the data if we cancel the editing

createGroup() {
    return new FormGroup({
      prop1: new FormControl(),
      prop2: new FormControl(),
      prop3: new FormControl()
    });
  }

以及编辑、取消和添加另一行的功能

edit(index: number) {  //we pass the "index" of the row we want to edit
    this.editing = index;
    this.oldValue = {  //here store the actual value
                       //we using "spread operator"
                       //yes, we need a copy of the old values
      ...this.formArray.at(index).value
    };
  }

  cancel() {  //we using the oldValue to 
    this.formArray.at(this.editing).setValue(this.oldValue);
    this.editing=-1;  //and there are no row editing
  }

  add() //simple "push" a formGroup in our array
  {
    this.formArray.push(this.createGroup())
    //I say that, when add a new row we want beging to edit it
    this.edit(this.formArray.controls.length-1)
  }

一个简单的（而且很丑。html）

<button (click)="add()">Add</button>
<form [formGroup]="formArray" (submit)="submit(formArray)">
  <table>
    <tr>
      <th>Prop1</th>
      <th>Prop2</th>
      <th>Prop3</th>
    </tr>
    <tbody>
     <!--we using ng-container to not create additional "tags"-->
     <!-- see how manage a formArray using let "group" of...
          and [formGroup]="group"
     -->
    <ng-container *ngFor="let group of formArray.controls;let i=index" [formGroup]="group">
       <!--when we are editing, show the inputs-->
        <tr *ngIf="editing==i"> 
      <th>
            <input formControlName="prop1">
      </th>
      <th>
            <input formControlName="prop2">
      </th>
      <th>
            <input formControlName="prop3">
      </th>
      <th>
            <button (click)="editing=-1">OK</button>
            <button (click)="cancel()">Cancel</button>
      </th>
        </tr>
       <!--when we are NOT editing, show the values-->
        <tr *ngIf="editing!=i">
      <td>
            {{group.get('prop1').value}}
      </td>
      <td>
            {{group.get('prop2').value}}
      </td>
      <td>
            {{group.get('prop3').value}}
      </td>
      <td>
            <button (click)="edit(i)">Edit</button>
            <button (click)="formArray.removeAt(i)">Delete</button>
      </td>
        </tr>
    </ng-container>
  </tbody>
  </table>
  <button>submit</button>
</form>

函数提交

submit(formArray) {
    if (formArray.valid)
    {
       this.myService.saveData(formArray.value).  //(*)
          subscribe(res=>{
             console.log(res)
          })
    }
    else 
       this.formArray.markAllAsTouched();
  }


//(*)I has a service with a simple

saveData(data:any[])
{
    return this.httpClient.post("http://....",data)
}

还有 stackblitz

API 可以，如果您使用的是 .NET Core

public class Data
{
    string prop1 {get;set;}
    string prop2 {get;set;}
    string prop3 {get;set;}
}

[HttpPost), ActionName("UpdateBulk")]
public async Task<object> UpdateBulk([FromBody]Data[]){
   try{
    ..you save your data here...
    return Ok(new { success = true, errorText = "Data saved!" });
   }
   catch(){
    return Ok(new { success = false, errorText = "Data incorrect" });
   }
}

如何更新 table 中的多行？ Angular 7

How to update multiple rows in the table? Angular 7

bulkupdate

angular