Recargar tabla sin actualizar la pagina
Publicado por autodidacta_95 (1 intervención) el 21/11/2020 16:57:42
hola a tod@s
tengo una tabla en un componente que en su inicio se carga con todas las poblaciones que hay en la base de datos y en la cual creo un formulario para recoger la zona y asi poder hacer una busqueda por zona.
Tabla:
Formulario para recoger la zona:
en typescript hago la llamada al service donde recibo los datos desde el back pero no me recarga la tabla
¿alguien puede ayudarme a ver lo que esta pasando? Esto deberia de recargarme la tabla sin necesidad de hacer un f5
gracias de antemano
tengo una tabla en un componente que en su inicio se carga con todas las poblaciones que hay en la base de datos y en la cual creo un formulario para recoger la zona y asi poder hacer una busqueda por zona.
Tabla:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<table class="table table-striped col-sd-12" id="poblacion">
<thead class="thead-dark">
<tr>
<th scope="col" colspan="7" class="text-center">Tabla de propietarios</th>
</tr>
</thead>
<tbody>
<tr class="col-sd-12">
<th scope="col" class="text-center ">Poblacion</th>
<th scope="col" class="text-center">Zona</th>
<th scope="col" class="text-center ">CP</th>
<th scope="col" colspan="2" class="text-center"></th>
</tr>
<tr class="col-sd-12" *ngFor="let poblacion of poblaciones | paginate: { itemsPerPage: 10,
currentPage: page } ">
<td class="text-center">{{poblacion.nombre}}</td>
<td class="text-center">{{poblacion.zona}}</td>
<td class="text-center">{{poblacion.cp}}</td>
<td class="text-center">
<button type="button" class="close btn btn-warning btn-md" (click)="popUpActualizarPoblacion(agregarPoblacion,poblacion.id,poblacion.nombre,
poblacion.zona, poblacion.cp, true)">
Actualizar
</button>
</td>
<td class="text-center">
<button type="button" class="close btn btn-warning btn-md" (click)="popUpElimar(eliminarPoblacion, poblacion.id,
poblacion.nombre, poblacion.zona)">
Eliminar
</button>
</td>
</tr>
</tbody>
</table>
<pagination-controls
(pageChange)="page = $event"
previousLabel="Anterior"
nextLabel="Siguiente">
</pagination-controls>
Formulario para recoger la zona:
1
2
3
4
5
6
7
8
9
<form class="form-inline col-sm-12 col-md-9" [formGroup]="zonaFormGroup" >
<div class="form-group mx-sm-3 mb-2">
<label for="buscarZona" class="sr-only">Busqueda por zona</label>
<input type="text" class="form-control" id="buscarZona" placeholder="Busqueda por zona"
required formControlName="zona">
</div>
<button type="button" (click)="buscarZona()" class="btn btn-warning mb-2">Buscar</button>
</form>
en typescript hago la llamada al service donde recibo los datos desde el back pero no me recarga la tabla
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
TYpecrit funcion
buscarZona(){
this.poblacionDto = new PoblacionDto();
this.poblacionDto.zona = this.zonaFormGroup.value.zona;
this.poblacionService.getPoblacionZona(this.poblacionDto).subscribe(
data => {
this.poblacion = data;
this.poblacionDto = null;
},
err => {
console.log(err.error);
} );}¿alguien puede ayudarme a ver lo que esta pasando? Esto deberia de recargarme la tabla sin necesidad de hacer un f5
gracias de antemano
Valora esta pregunta
0
