TransWikia.com

Variable compartida entre Componente y Servicio, cómo se pasa el valor?

Stack Overflow en español Asked by casiopea2000 on December 2, 2021

Estoy siguiendo los ejemplos de un curso y no entiendo cómo se puede actualizar la variable "heroes" (es un objeto) en el componente:

"heroe.components.ts":

 import { Component, OnInit } from '@angular/core';
import { HeroeModel } from '../modelos/heroe.model';
import { NgForm } from '@angular/forms';
import { HeroesService } from '../servicios/heroes.service';

@Component({
  selector: 'app-heroe',
  templateUrl: './heroe.component.html',
  styleUrls: ['./heroe.component.css']
})

export class HeroeComponent implements OnInit {


  heroe: HeroeModel = new HeroeModel();

  constructor(private heroeService: HeroesService) { }

  ngOnInit( ) {
  }

  guardar(formulario: NgForm)
  {
    console.log("le hemos dado a guardar" + this.heroe.nombre);

    if(formulario.invalid){
      console.log("formulario es inválido");
    }

    this.heroeService.crearHeroe(this.heroe).subscribe((resp) => {
      console.log('respuesta');
      console.log(resp);
      this.heroe = resp;
    });
  }

}

Y este es el código del servicio "heroes.service.ts":

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HeroeModel } from '../modelos/heroe.model';
import { map } from 'rxjs/operators';



@Injectable({
  providedIn: 'root'
})

export class HeroesService {

  private url = 'https://appdemo1-4ae33.firebaseio.com';

  constructor( private http: HttpClient) {}


  crearHeroe( heroe: HeroeModel){

    console.log("nombre" + heroe.nombre);
    return this.http.post(`${ this.url }/heroes.json`, heroe)
            .pipe(
              map( (resp: any) => {
                heroe.id = resp.name;
                return heroe;
              })
            );
  }
}

Realmente se puede comentar la linea en el componente "heroe.component.ts":

//this.heroe = resp;

y el objeto "heroe" se actualiza sólo en el componente y por tanto en la vista de ese componente. Me han dicho al que que ne Angular las variables se pasan por referencia, pero no entiendo ese proceso.

Es decir, el código en el componente se podría dejar así:

this.heroeService.crearHeroe(this.heroe).subscribe((resp) => {
  console.log('respuesta');
  console.log(resp);
  //this.heroe = resp;----> esta linea la comentamom pero heroe se sigue actualizando¿cómo es pos?
});

Realmente dentro de "subscribe no hago nada de nada aparte de imprimir una par de console.log.

EDITO 23/07/2020

Añado el template de ese componente:

<form (ngSubmit)="guardar(f)" #f="ngForm">
<div class="form-group">
    <label for="exampleInputEmail1">ID:</label>
    <input type="text" class="form-control" [(ngModel)]="heroe.id" aria-describedby="emailHelp" placeholder="Id del héroe" name="id">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
    <label for="exampleInputEmail1">Nombre:</label>
    <input type="text" class="form-control" [(ngModel)]="heroe.nombre" aria-describedby="emailHelp" placeholder="nombre" name="nombre">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
    <label for="exampleInputEmail1">Poder:</label>
    <input type="text" class="form-control" [(ngModel)]="heroe.poder" aria-describedby="emailHelp" placeholder="poder" name="poder">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
    <label for="exampleInputEmail1">Vivo:</label>
    <input type="text" class="form-control" [(ngModel)]="heroe.vivo" aria-describedby="emailHelp" placeholder="vivo" name="vivo">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<button type="submit" class="btn btn-primary">Submit</button>

dadsadasd

One Answer

Creo que lo que esta pasando es que el objeto heroe lo estas actualizando con el formulario, al enviar ese objeto al servicio lo que hace es crear un registro con tu api de acuerdo a los valores que tenia el objeto, el objeto heroe siempre esta conectado con el formulario por eso aunque comentes this.heroe = resp; el heroe sigue igual no es que se haya actualizado solamente esta de acuerdo a los valores del formulario, si no comentas el this.heroe = resp y funciona debe de ser porque tu api regresa un objeto con los atributos que tiene el heroe. Estaría bien si mostraras tambiel el template del componente.

Answered by Daniel Sarmiento on December 2, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP