1

Tengo una tabla donde visualizo los datos de un JSON y mi objetivo es mostrar solo los datos según lo que introduzca en los inputs, que es latitud y longitud y si eso valores coinciden con la latitud y la longitud de una ciudad del JSON, pues mostrar todo lo demás, id, ubicación... He visto NgIf y NgTemplate, pero soy novato en Angular todavía. Estos son los datos del json.

Codigo app.component.html:

<h1>{{Titulo}}</h1>

<div>
<form [formGroup]="coordenadas" (ngSubmit) = "enviarDatos(coordenadas.value)" >
    <input type="text" class="fortextbox" name="latitud" placeholder="Introduce una latitud" 
      formControlName="latitud">
    <br/>

    <input type="text" class="fortextbox" name="longitud" placeholder="Introduce una longitud" 
      formControlName="longitud">
    <br/>

    <input type="submit" class="forsubmit" value="Enviar">
</form>
</div> 

<pre *ngIf="datosCargados">
<table>
  <thead>
    <th>Id</th>
    <th>Ubicación</th>
    <th>Latitud</th>
    <th>Longitud</th>
    <th>T.mínima </th>
    <th>T.máxima</th>
  </thead>
  <tbody>
    <tr *ngFor="let datos of datosCargados">
      <td>{{datos.id}}</td>
      <td>{{datos.ubicacion}}</td>
      <td>{{datos.latitud}}</td>
      <td>{{datos.longitud}}</td>
      <td>{{datos.temperaturamin}}</td>
      <td>{{datos.temperaturamax}}</td>
    </tr>
  </tbody>
</table>
</pre>
<h3 *ngIf="!datosCargados">No hay datos cargados</h3>
1
  • Podrias agregar los datos de tù controlador para comprender mejor tú consula.
    – cjara
    el 3 oct. 2019 a las 20:24

1 respuesta 1

0

Prueba mostrar estos valores con Datatables, te genera un input y hace un filtrado automatico de los datos. Hay varias opciones para ordenar, filtrar o eliminar datos segun condiciones.

1
  • Es como ng2-search-filter de angular, pero no es lo que busco exactamente. Quiero introducir latitud y longitud y si existe que me muestre la fila que coincida, si no, un mensaje cualquiera.
    – user143484
    el 3 oct. 2019 a las 11:52

Tu Respuesta

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