2

He visto que hay que usar observable y subscribe, pero no lo saco...

En el servicio tengo esto (en el postman me devuelve el JSON con todos los campos):

 findByNombre(nombre: String): Observable<Aulas> {
    return this.http.get<Aulas>(this.url + '/' + nombre);
  }

En el html tengo esto:

  <label>Lista de aulas</label><br>
  <select formControlName="aulas" (change)="buscarValores()" >
    <option *ngFor="let aula of aulas" >{{aula.nombre}}</option>
  </select>
  </div>
  <div>
    <label>Nombre</label><br>
    <input formControlName="nombre">
  </div><p></p>

Y en el componente es donde tengo que hacerlo pero no lo saco. He visto que en el component tengo que aplicar el código en el

this.formulario.patchValue({

He intentado hacer cosas así, pero no hay manera:

this.aulasService.findByNombre(this.formulario.controls.nombre.value).subscribe(resultado => this.capacidad = resultado.capacidad);

Esto no lo tendría que hacer en el ngOnInit, ¿verdad? He intentado meter el código en el (change)="buscarValores()", pero no hay manera

No puedo hacer el console.log de resultado, pero si lo hago sobre this.capacidad, da undefined

this.aulasService.findByNombre(this.formulario.controls.nombre.value).subscribe(resultado => this.capacidad = resultado.capacidad);
console.log(this.capacidad);

EDITO. Con esto en el ngoninit cconsigo pintar lo que me devuelve en la consola:

this.aulasService.findByNombre('Aula 1').subscribe(Aulas => {this.aulas2 = Aulas; console.log(this.aulas2);

El tema es que entiendo que esto no tiene que estar aquí, no? Debería estar en un método del change de la select options

Imagen

Lo que no sé es, cómo paso un elemento, por ejemplo el nombre, a la caja del nombre?

EDITO 2: Con esto he conseguido sacar por consola el nombre:

buscarValores() {
    this.formulario.patchValue({
      nombre: this.aulasService.findByNombre(this.formulario.controls.aulas.value).subscribe(Aulas => {this.aulas2 = Aulas; 
        console.log(this.aulas2.nombre);
      }),
    })
   }

El nombre lo he puesto así, con el mismo nombre del formgroup:

  @Input()
  nombre: String;

Pero cuando elijo algo del select options, pone [object Object] Cómo lo parseo a la caja de texto? Ejemplo del html:

  <div>
    <label>Nombre</label><br>
    <input  formControlName="nombre" >
  </div><p></p>
3
  • Buenas Unai, podría echarte una mano, pero antes de nada, necesitaría saber qué tiene resultado, podrías hacer un console.log(resultado); y mostrarlo en tu pregunta? Salu2! Commented el 28 dic. 2019 a las 13:40
  • Hola @Unai, tengo que preguntar si lo que quieres es realizar una petición a una API y que dicho valor obtenido en formato JSON deseas mostrarlo en los option de tu select? y por que no puedes mostrar en consola lo que llevas en resultado?
    – jecorrales
    Commented el 28 dic. 2019 a las 14:50
  • Si, eso es. Recibo el json y quiero informar cada campo en su correspondiente campo del html
    – Unai
    Commented el 28 dic. 2019 a las 14:53

1 respuesta 1

1

Lo primero que debes realizar es crear un servicio el cual debes enlazar con tu componente para obtener y hacer referencia al metodo correspondiente, es decir, podrías realizar esta secuencia:

SERVICE

  //URL API for production server
  private api_production = 'backend/php/';

  //Method return the report history
  public getData()
  {
    //Path
    const path = this.api_production + 'getData';
    return this.http.get<Aulas[]>(path);
  };

Ya cuando tengas correctamente el servicio solo debes importar el servicio a tu componente y realizar el llamado al metodo en el constructor:

COMPONENTE TS

//Services import { ReportService } from './../../services/report.service'; //Interfaces import { Faculty } from './../interfaces/faculty';

En tu constructor realizas los siguiente:

constructor(private _reportService: ReportService)
  {
    _reportService.getData()
    .subscribe(Aulas => {
      //data
      this.aulas = Aulas;

      console.log("Aulas: ", this.Aulas);
    });

  };

HTML

<select>
   <option *ngFor="let aula of aulas" >{{aula.nombre}}</option>
</select>

Para hacer uso de el tipeado de Aulas que es en pocas palabras una estructura de datos que tiene un valor específico, denominado como una interface es decir:

export interface Aulas
{
  id_nombre:number;
  nombre:string;
}

Y no olvides que debes también importarlo en el servicio.

Si necesitas algo más no dudes en preguntar, espero que haya sido clara mi respuesta y si te ha servido no olvides marcarla como la respuesta correcta para la solución de tu problema.

3
  • 1
    Gracias jercorrales. En la select options tengo cargas las aulas de BBDD. Lo que necesito es que cuando se pulse un aula, buscar los datos correspondientes (para eso tengo findByNombre) y pintarlos en las cajas de texto. Así es cómo se ve ahora. El tema es que si lo pongo en el constructor, entiendo que sólo lo hace cuando arranca no? Lo tendría que hacer cada vez que se pulsa en la select options. Y después, cómo muevo un elemento de la clase al literal de texto? imgfz.com/i/Fhngjf5.jpeg
    – Unai
    Commented el 28 dic. 2019 a las 15:36
  • Entonces requieres es ejecutar un metodo con un parámetro en específico para realizar una búsqueda de información y con ello llenar algún select, tabla u otra caja dentro del mismo formulario que estás llenando?
    – jecorrales
    Commented el 29 dic. 2019 a las 18:04
  • Acabo de realizar un ejemplo en Stackblitz de lo que creo que necesitas, si esto te sirve me avisas para actualizar la respuesta a la pregunta por si en algún momento el enlace llegara a eliminarse.
    – jecorrales
    Commented el 29 dic. 2019 a las 20:27

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.