Estoy haciendo un método CRUD usando una tabla de material angular y un diálogo, no entiendo cómo hacer el método de actualización usando el diálogo sobre cómo pasar los datos de un componente a otro.
Mi línea de modificación no actualiza cómo hacerlo y ¿qué pasa con mi código?
Gracias.
Servicio
getTableDetails(): Observable<any[]> { return this.http.get<any[]>(this.url); } create(name: any): Observable<any> { return this.http.post<any>(this.url, name); } update(id: any, data: any): Observable<any> { return this.http.put<any>(this.url + '/' + id, data); } delete(id: any): Observable<number> { return this.http.delete<any>(this.url + '/' + id); }ts.archivo
openDialog(element: any) { const dialogRef = this.dialog.open(EditTableDialogComponent, { data: element, }); dialogRef.afterClosed().subscribe(result => { console.log(`Dialog result: ${result}`); }); }diálogo.html
<div class="inputAdd"> <h2>Edit Table</h2> <input #input value="{{element.name}}" required> <button (click)="edit(input.value)">Modifier</button> </div>diálogo.ts
export class EditDialogComponent { constructor( @Inject(MAT_DIALOG_DATA) public data: MatDialog, private tableService: TableService ) {} public element: any = this.data; edit(value: any) { this.tableService.update(this.element.id, value).subscribe((data:any) => { console.log(data); }); } }Creo que no debe realizar la actualización o la creación del elemento dentro del componente de diálogo. Eso no debe preocuparte por tal responsabilidad, de lo contrario te resultará más difícil mantenerla. Solo debe permitir al usuario realizar cambios en la entidad y listo. Cada vez que cierre el modal, puede suscribirse al evento afterClosed y decidir allí qué debe hacer con la entidad. Por lo general, si la entidad tiene una id , significa que necesita actualizar una entrada existente; de lo contrario, cree una nueva.
El componente de diálogo también debe inyectar dialogRef , para que pueda cerrar el diálogo y también proporcionar un resultado:
export class EditDialogComponent { constructor( @Inject(MAT_DIALOG_DATA) public data: MatDialog, private tableService: TableService, private dialogRef: MatDialogRef<EditDialogComponent> ) {} public element: any = this.data; edit(value: any) { this.dialogRef.close(this.element); } }En el componente que representa la tabla, debe abrir el modal como ya lo hace:
openDialog(element: any) { const dialogRef = this.dialog.open(EditTableDialogComponent, { data: element, }); dialogRef .afterClosed() .pipe( filter((element) => !!element), // in case the user closes the modal without pressing the "Modifier" button switchMap( (element) => iif(() => element.id), this.tableService.update(element.id, element), this.tableService.create(element) ) ) .subscribe((data) => { console.log('success', data); }); }Y también decidir qué hacer con el elemento (crear o actualizar).
En su componente, intente usar Formbuilder y input.getValue()
<div [formGroup]="formInput" class="inputAdd"> <h2>Edit Table</h2> <input #input value="{{element.name}}" formControlName="myInput"> <button (click)="edit(input.value)">Modifier</button> </div>en TS
constructor(private formBuilder: FormBuilder) { } createForm() { this.formInput = this.formBuilder.group({ myInput: [cliente.nome], }) } edit(value: any) { sendValue = this.createForm.myInput.getValue; this.tableService.update(this.element.id, sandValue).subscribe((data:any) => { console.log(data); }); }