Question

我正在创建一个表，我可以在调用addRow()方法时添加新行，并且我能够删除deleteRow()调用行索引的任何特定行，但是如何我可以在特定索引处添加行吗？

＆＃13;

export class TestComponent implements OnInit{
	public invoiceForm: FormGroup;

	constructor(private _fb: FormBuilder) {
		this.invoiceForm = this._fb.group({
		itemRows: this._fb.array([this.initItemRows()])
		});
	}

	initItemRows() {
		return this._fb.group({
			itemname: [this.qty],
			itemname2: [this.price],
		});
	}

	addRow(){
		const control = <FormArray>this.invoiceForm.controls['itemRows'];
		control.push(this.initItemRows());
	}

	deleteRow(index: number) {
		const control = <FormArray>this.invoiceForm.controls['itemRows'];
		control.removeAt(index);
	}

	editRow(index: number){
		//how to add this data at a particular index.
		const control = <FormArray>this.invoiceForm.controls['itemRows'];
		control.push(this.initItemRows());
	}
}

＆＃13;

<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>

＆＃13;

Answer 1

Angular 2提供setControl(index: number, control: AbstractControl): void，用于替换数组中给定index的现有控件。 Source

如何编辑索引为角度2的表

1 个答案: