0

Tengo la siguiente tabla con angular material, al realizar la insersión de un nuevo registro lo hace sin problema, lo que necesito es que se vea reflejado el cambio de manera inmediata al momento de que se muestra el mensaje de exito, ya que asi como lo tengo actualmente lo inserta, se muestra el mensaje de que fue exitoso y ya, hasta que refresque se visulaiza el registro nuevo y no lo quiero asi

html

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

                <ng-container matColumnDef="fecha">
                    <th mat-header-cell *matHeaderCellDef> FECHA  </th>
                    <td mat-cell *matCellDef="let element"> {{element.fecha | date: 'yyyy-MM-dd'}} </td>
                </ng-container>


                <ng-container matColumnDef="descripcion">
                    <th mat-header-cell *matHeaderCellDef> DESCRIPCIÓN </th>
                    <td mat-cell *matCellDef="let element">
                        <mat-form-field>
                            <textarea matInput [value]="element.descripcion" [disabled]="!element.editable"
                                (keyup)="obtenerDescrip($event.target,element)"></textarea>
                        </mat-form-field>
                    </td>
                </ng-container>

               

                <ng-container matColumnDef="botonActions">
                    <th mat-header-cell *matHeaderCellDef> ACCIONES </th>
                    <td mat-cell *matCellDef="let element">
                        <button mat-icon-button color="primary" (click)="actualizar(element,inhabilModel)"
                        matTooltip="Editar registro">
                            <mat-icon>edit</mat-icon>
                        </button>
                        <button mat-icon-button color="warn"  matTooltip="Eliminar registro"
                        (click)="eliminar($event.target,element)">
                            <mat-icon>delete</mat-icon>
                        </button>
                    </td>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>
            <mat-paginator #paginator [pageIndex]="0" [pageSize]="10" [pageSizeOptions]="[10, 15]" showFirstLastButtons>
            </mat-paginator>

component

  dataSource: any;
  obtenerCatDias() {
    this.diaService.obtenerDias().subscribe(response => {
      if (response.data.length == 0) {
        Swal.fire({
          icon: 'error',
          title: 'Error',
          text: 'Sin datos para mostrar'
        });
      } else {
        this.diasInhabiles = response.data;
        this.dataSource = new MatTableDataSource(this.diasInhabiles);
        this.dataSource.paginator = this.paginator;
      }

    });
  }
  
        agregar() {
   
          this.diaService.agregarNuevo(this.diaInhabilModel).subscribe(response => {
            this.diaInhabilModel = response;
            Swal.fire({
              icon: 'success',
              title: 'Éxito',
              text: 'Nuevo registro guardado correctamente'
            });
            
          });
        
        }

1 respuesta 1

0

Si this.diasInhabiles es la variable que contiene todas las rows que deseas que tenga la tabla, necesitas hacer algo como esto:

this.dataSource.data = this.diasInhabiles;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.