Angular 6: agregue una nueva fila en AG Grid

Bienvenido a nuestra página web, en este sitio vas a encontrar la solucíon que estás buscando.

Solución:

Para insertar una nueva fila en ag-grid no deberías usar el rowData directamente creará anulará el objeto existente y todos los estados se restablecerán, y de todos modos, hay un método para ello setRowData(rows)

Pero recomendaría usar updateRowData(transaction):

updateRowData(transaction) Actualice los datos de fila en la cuadrícula. Pase un objeto de transacción con listas para agregar, eliminar y actualizar.

Como ejemplo:

gridApi.updateRowData(add: newRows);

para angulares:

establecer id para html – selector (#agGrid en este ejemplo):

y luego defina el viewchild con esta identificación, importe AgGridAngular como se muestra a continuación, luego puede usar la api ag-grid en Angular

import Component, OnInit, ViewChild from '@angular/core';
import  AgGridAngular  from 'ag-grid-angular';

@Component(
  selector: 'app-angular-handsometable',
  templateUrl: './angular-handsometable.component.html',
  styleUrls: ['./angular-handsometable.component.scss']
)
export class AngularHandsometableComponent implements OnInit 
  @ViewChild('agGrid') agGrid: AgGridAngular;
  columnDefs = [
    headerName: 'Make', field: 'make', sortable: true, filter: true, editable: true ,
    headerName: 'Model', field: 'model', sortable: true, filter: true, editable: true ,
    headerName: 'Price', field: 'price', sortable: true, filter: true, editable: true 
  ];

  rowData = [
     make: 'Toyota', model: 'Celica', price: 35000 ,
     make: 'Ford', model: 'Mondeo', price: 32000 ,
     make: 'Porsche', model: 'Boxter', price: 72000 ,
     make: 'Toyota', model: 'Celica', price: 35000 ,
     make: 'Ford', model: 'Mondeo', price: 32000 ,
     make: 'Porsche', model: 'Boxter', price: 72000 ,
     make: 'Toyota', model: 'Celica', price: 35000 ,
     make: 'Ford', model: 'Mondeo', price: 32000 ,
     make: 'Porsche', model: 'Boxter', price: 72000 ,
     make: 'Toyota', model: 'Celica', price: 35000 ,
     make: 'Ford', model: 'Mondeo', price: 32000 ,
     make: 'Porsche', model: 'Boxter', price: 72000 
  ];
  constructor()  

  ngOnInit() 

  

  save() 
    console.log( 'Save', this.rowData );
  

  addRow() 
    this.agGrid.api.updateRowData(
      add: [ make: '', model: '', price: 0 ]
    );
  

Aquí puedes ver las reseñas y valoraciones de los lectores

Si tienes alguna cuestión y forma de limar nuestro división te insinuamos dejar una disquisición y con deseo lo estudiaremos.

---

---

Utiliza Nuestro Buscador