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>
<i class="fi-rr-edit" (click)="openDialogos(element.id)"></i>
<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.