角2のインデックスを持つテーブルを編集する方法

Question

テーブルを作成していて、addRow()メソッドの呼び出しで新しい行を追加することができ、deleteRow()の呼び出し時に行のインデックスを持つ特定の行を削除できます。しかし、特定のインデックスに行を追加するにはどうすればいいですか？

export class TestComponent implements OnInit{ 
 
\t public invoiceForm: FormGroup; 
 

 
\t constructor(private _fb: FormBuilder) { 
 
\t \t this.invoiceForm = this._fb.group({ 
 
\t \t itemRows: this._fb.array([this.initItemRows()]) 
 
\t \t }); 
 
\t } 
 

 
\t initItemRows() { 
 
\t \t return this._fb.group({ 
 
\t \t \t itemname: [this.qty], 
 
\t \t \t itemname2: [this.price], 
 
\t \t }); 
 
\t } 
 

 
\t addRow(){ 
 
\t \t const control = <FormArray>this.invoiceForm.controls['itemRows']; 
 
\t \t control.push(this.initItemRows()); 
 
\t } 
 

 
\t deleteRow(index: number) { 
 
\t \t const control = <FormArray>this.invoiceForm.controls['itemRows']; 
 
\t \t control.removeAt(index); 
 
\t } 
 

 
\t editRow(index: number){ 
 
\t \t //how to add this data at a particular index. 
 
\t \t const control = <FormArray>this.invoiceForm.controls['itemRows']; 
 
\t \t control.push(this.initItemRows()); 
 
\t } 
 
}

<table id="tableData" border="1" > 
 
    <tr> 
 
    <th>S.No.</th> 
 
    <th>Qty</th> 
 
    <th>Price</th> 
 
    <th>Operation</th> 
 
    </tr> 
 
    <tr [hidden]="!i" *ngFor="let itemrow of invoiceForm.controls.itemRows.controls; let i=index;" > 
 
    <td>{{ i }}</td> 
 
    <td>{{ invoiceForm.value.itemRows[i].itemname }}</td> 
 
    <td>{{ invoiceForm.value.itemRows[i].itemname2}}</td> 
 
    <td> <button (click)="deleteRow(i)" class="btn btn-danger">Delete</button> 
 
      <button (click)="editRow(i)" (click)="modal1.show()" class="btn btn-success">Edit</button> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 1

角度2アレイ内の所与のindexで既存のコントロールを交換するために使用されるsetControl(index: number, control: AbstractControl): voidを提供します。 Source