1

Estoy llenando una tabla manualmente por medio de un crud. para esto he realizado un pop up para que el componente cree la celda en la tabla, y el pop up solo tiene dos campos de texto y dos botones uno de guardar y uno de cancelar.

<mat-form-field appearance="fill">
            <mat-label>Nombre plantilla</mat-label>
            <input matInput formControlName="inputTemplateTitle">
        </mat-form-field>
          <mat-form-field class="col-12" appearance="fill">
            <mat-label>Plantilla</mat-label>
            <textarea matInput rows="4" cols="45" formControlName="inputTemplate" name="Template" 
             (keyup)="onKey($event)" 
            maxlength="3000" [(ngModel)]="titleModel"</textarea>
            <mat-hint align="start">{{contador}} / 3000</mat-hint>
            <mat-hint align="end" style="color:red;" *ngIf="titleModel?.length > 2999"> 3000 
            carácteres como máximo </mat-hint>
          </mat-form-field>
          <div class="col-12 row pt-3">
            <div class="col-6 col-md-6 col-lg-6 ">
              <button class="btn-mios btn-cancel" mat-stroked-button  [mat-dialog- 
               close]>Cancelar</button>
            </div>
  
            <div class="col-6 col-md-6 col-lg-6 text-md-end text-lg-end">
              <button class="btn-mios btn-submit" mat-raised-button color="primary"
              [mat-dialog-close] (click)="addTemplate()">Crear plantilla</button>
            </div>

mi contenido del ts que hace la funcion para el agregado de la plantilla es el siguiente.

addTemplate() {
       const plantilla1: Templates = {
        text: this.templateForm.value.inputTemplateTitle,
        text_data: {
          "author": { 
              "role": "Agent",
              "idAgent": "",
              "fullname": ""
          },
          "type": "text",
          "conversation_id": "",
          "data": {
              "text": this.templateForm.value.inputTemplate,
          }
      },
        type: "text",
        status: "1",
        project_id: this.project.id
      }
      this.template = plantilla1
      console.log('Nueva plantilla:', plantilla1.text)  
      return {
        answer : plantilla1
      } 
  }

y tengo el componente padre que contiene la tabla donde se ven reflejados los datos solicitados.

<!-- Table -->
<div class="col-12 col-md-12 col-lg-12 row">
    <div class="col-12 pt-2" *ngIf="flag">
        <table mat-table [dataSource]="dataSources">
         
             <!-- Id Column -->
            <ng-container matColumnDef="id">
                <th mat-header-cell *matHeaderCellDef> </th>
                <td mat-cell *matCellDef="let element">
                    <i class="fi-rr-eye" (click)="openDialog(element.id)"></i> &nbsp; &nbsp;
                    <i class="fi-rr-edit" (click)="openDialogos(element.id)"></i> &nbsp; &nbsp;
                    <i class="fi-rr-trash" (click)="deleteTemplates(element.id)"></i></td>
            </ng-container>

en el componente padre lo que me falla es que cuando hago el llamado al resultado del return no me devuelve nada y por ende no arroja nada solo se queda en el primer console.log.

openDialogitos(){
    const dialogRef = this.dialog.open(PopUpPlantillaCreateComponent, {
      width: '516px',
      height: 'auto',
      maxHeight: '409px'
     });
    dialogRef.afterClosed().subscribe(result => {
      console.log('obtengo los datos')
      if(result){
        console.log('prueba de ingreso')
        if(!result.answer){
          console.error('Sin respuesta')
          return
        } 
        console.log('Cargando datos al servidor')
        const titleTemplate = result.answer?.text
        const contentTemplate = result.answer?.text_data?.data?.text
        if(titleTemplate && contentTemplate){
          this._httpService.post('shortcut', result.answer).subscribe(
            response => {
              if (!response) {
                console.error('Error: al agregar plantilla');
                
              } else {
                console.log('se ha agregado tu plantilla correctamente!');
                this.getTemplates();  
              }
            }
          );
        }
    }
    });
  }

ustedes me preguntaran por que lo hago de está forma, pues lo estoy realizando así para que la tabla pueda refrescarse al momento de agregar un nuevo componente. pero antes me funcionaba dejando todo en el componente hijo, pero me tocaba refrescar la web, pero lo que intente es para que se refresque el llamado a la tabla.

1 respuesta 1

1

Para poder solucionar mi problema solo tuve que colocar mi codigo de creacion en el pop up y llame a la variable que trae a la tabla desde el componente padre.

openDialogitos(){
    const dialogRef = this.dialog.open(PopUpPlantillaCreateComponent, {
      width: '516px',
      height: 'auto',
      maxHeight: '409px'
     });
    dialogRef.afterClosed().subscribe(result => {
          this.getProject()
    });
  

}

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.