1

Estoy extrayendo los datos de un id en especifico y los mando a otra pagina anteriormente tuve problemas para convertir mi [object Object] en un array en el cual no se podia interar con mi ngFor en la vista por lo que buscando encontré una solución pero no funciona de manera correcta ya que me muestra datos vacíos de mas y no logro comprender porque hace eso

Anexo foto del problema que tengo

De lado izquierdo estoy mostrando los datos que requiero pero a la vez me muestra los mismos campos vacíos

De lado derecho tengo como se muestran mis datos

introducir la descripción de la imagen aquí

Código de servicio.ts

obtenerProvedor(_id:string){
  const url = `${base_url}/provider/get-provider/${_id}`;
  return this.http.get<getProvedor>(url,this.headers)
  .pipe(
    map(provider=>{
      const provedor=provider
        console.log(provedor)
        return{
          provedor
        }
    })
  );
}

Código de component.ts Algunas cosas están comentadas fueron intentos que realice pero que no funcionaron

  cargarProvedor(id:string){
    if (id=="nuevo"){
       this.mostrar=true
    }
    else{
      this.mostrar =false
      this.provedoresService.obtenerProvedor(id)
      .subscribe(resp=>{
        for(var i in resp.provedor) {
          this.provedor.push(resp.provedor[i]);
      }
        // this.provedor.push(provedor as unknown as Provedor)
  //     const prueba =JSON.stringify(resp.provedor)
  // this.provedor.push(prueba)
       console.log("esta es la respuesta"+resp.provedor);
        console.log("Este es el provedor"+this.provedor)
      })
    }
  }

Código de del component.html

<div class="card-body"  *ngFor="let provider of provedor"
            > 
            <p class="text-muted m-b-10 font-13"> Telefono</p>
                <h3 class="box-title m-b-0">
                    {{ provider.name }}
                </h3>
                <br>
                
                <p class="text-muted m-b-10 font-13">Nombre</p>
                 <h6>{{ provider.phone }}</h6> 
                <br>
                <p class="text-muted m-b-10 font-13">Registro</p>
                <h6>{{ provider.registerUser?.user }}</h6> 
                
            </div>

La idea es de que el html solo muestre estos datos de lado izquierdo y que no aparezcan las leyendas que se repiten (nombre y teléfono y registro)

introducir la descripción de la imagen aquí

2
  • 1
    La verdad no entiendo que estructura quieres lograr. Puedes editar tu pregunta y poner la estructura que quieres obtener?
    – Legna
    Commented el 13 nov. 2021 a las 18:25
  • claro la modificare, gracias por el comentario
    – ispr
    Commented el 13 nov. 2021 a las 18:33

1 respuesta 1

1

No necesitas transformar tus datos. Solo cárgalos en tu html directamente con una propiedad que refleje su tipo.

proveedor = null;

cargarProvedor(id: string) {

  this.provedoresService.obtenerProvedor(id).subscribe(resp => {
    this.proveedor = resp.proveedor
  })

}

Esto en tu html se llamaria directamente

<div class="card-body">
  <p class="text-muted m-b-10 font-13"> Telefono</p>
  <h3 class="box-title m-b-0">
     {{proveedor?.provider.phone }} 
  </h3>
  <br>

  <p class="text-muted m-b-10 font-13">Nombre</p>
  <h6>{{proveedor?.provider.name }}</h6>
  <br>
  <p class="text-muted m-b-10 font-13">Registro</p>
  <h6>{{ proveedor.provider.registerUser?.user }}</h6>

</div>

3
  • Realice lo que me comentaste y al mostrarlo no me da ningún error pero tampoco me muestra los valores que quiero representar, mostrando lo que me da de respuesta en consola me da undefind
    – ispr
    Commented el 13 nov. 2021 a las 19:44
  • Edite mi respuesta. Asegúrate que que estés usando la variable correcta.
    – Legna
    Commented el 13 nov. 2021 a las 19:49
  • Haciendo distintas pruebas solo era cuestión de llamar la forma correcta ya que el array se llama provider entonces fue {{proveedor?.provider.phone }}, Muchas gracias!
    – ispr
    Commented el 14 nov. 2021 a las 17:30

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.