如何在 angular 6 的编辑模式下动态地在 ngFor table 中添加多行

Question

我有一个 ngFor table，我可以在编辑模式下添加一行，其中有一些 select 个框。

我可以编辑、取消并将数据保存到 mysql 的数据库中。

问题是我需要在 table 编辑模式下动态添加多行并一次性保存。实际上这是我办公室的一个项目，所以我不能分享任何代码。但我正在使用

myArray.splice(0,0,newObject);
myArray = [...myArray]

向 table 添加新行。我如何使用具有单独取消按钮的相同行来添加多行。

Answer 1

Stackblitz demo

您可以使用 FormArray 来做到这一点。基本上，table 的每一行都将是 FormArray:

中的一个条目

<form [formGroup]="_form" novalidate>
    <table>
        <tbody formArrayName="data">
          <tr *ngFor="let array of _form.get('data').controls; index as i"
              [formGroupName]="i">
            <td>
              <input matInput 
                     formControlName="name" 
                     placeholder="Name" 
                     required>
            </td>
            <td>
              <input matInput 
                     formControlName="surname" 
                     placeholder="Surname" 
                     required>
            </td>
            <td>
              <select formControlName="gender">
                <option [ngValue]="null">GENDER</option>
                <option *ngFor="let g of _genders" [ngValue]="g">
                  {{g}}
                </option>
              </select>
            </td>
            <td>
              <button (click)="_removeRow(i)" type="button">
                Remove
              </button>
            </td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td>
              <button type="button" (click)="_addRow()">
                New Row
              </button>
            </td>
          </tr>
        </tbody>
    </table>
</form>

请注意，表单数组中的控件也是 FormGroup 而不是简单的控件。总体_form可以声明为：

this._form = this._formBuilder.group({
  data: this._formBuilder.array([])
});

您可以通过以下操作将 FormGroup 添加到 FormArray：

const formArray: FormArray = this._form.get('data') as FormArray;

const form = this._fb.group({
  name: ['', Validators.required],
  surname: ['', Validators.required],
  gender: [null, Validators.required]
});

formArray.push(form);

您可以通过从 formArray 中删除一行来删除它：

const formArray: FormArray = this._form.get('data') as FormArray;
formArray.removeAt(index);

如何在 angular 6 的编辑模式下动态地在 ngFor table 中添加多行

How to add multiple rows in ngFor table dynamically in edit mode in angular 6

javascript

angular

ngfor