How to pass variable from .ts to html

Question

I'm using the Hero's demo, provided from angular's site. I modify it to keep data from my rest server. Everithing ok , but when i try to open hero's detail it miss to print every detail like name surname ecc...

I think that there's a problem beetween "hero-detail.component.ts" and "hero-detail.component.html".

When i try to print this.hero.nome it showing nothing, so i think that is an empty class.

My rest server confirm that it send correctly all the information.

Here's my hero-detail.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';

import { Hero }         from '../hero';
import { HeroService }  from '../hero.service';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: [ './hero-detail.component.css' ]
})
export class HeroDetailComponent implements OnInit {
  @Input() hero: Hero;



  constructor(
    private route: ActivatedRoute,
    private heroService: HeroService,
    private location: Location
  ) {}

  ngOnInit(): void {
    this.getHero();
  }

  getHero(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    this.heroService.getHero(id)
    .subscribe(hero => this.hero = hero);

  }

  goBack(): void {
    this.location.back();
  }

 save(): void {
    this.heroService.updateHero(this.hero)
      .subscribe(() => this.goBack());
  }
}

and my hero-detail.component.html

<div *ngIf="hero">

  <h2>{{hero.nome | uppercase}} Dettagli</h2>
  <div><span>id: </span>{{hero.id}}</div>
  <div>
    <label>Nome:
      <input [(ngModel)]="hero.nome" placeholder="Nome"/>

      {{hero.nome}}
    </label>
    </div>
    <div>
    <label >Cognome:
      <input [(ngModel)]="hero.cognome" placeholder="Cognome"/>
    </label>
  </div>



  <button (click)="goBack()">go back</button>
  <button (click)="save()">save</button>
</div>

In the HTML file i want to display the name and the surname of the heroes provided by my rest server

Solution

I guess that we are having a mistake here, and if I suppouse that you are using the Heros project from the angular page, the response of the service will be in english, not in Italian.

<div *ngIf="hero">

  <h2>{{hero.name | uppercase}} Dettagli</h2>
  <div><span>id: </span>{{hero.id}}</div>
  <div>
    <label>Nome:
      <input [(ngModel)]="hero.name" placeholder="Nome"/>

      {{hero.name}}
    </label>
    </div>
    <div>
    <label >Cognome:
      <input [(ngModel)]="hero.lastname" placeholder="Cognome"/>
    </label>
  </div>



  <button (click)="goBack()">go back</button>
  <button (click)="save()">save</button>
</div>

then

<h2>{{hero.nome | uppercase}} Details</h2>

will be

<h2>{{hero.name | uppercase}} Details</h2>

hero.nome will be hero.name and I guess that user.cognome will be user.lastname.

Hope it helps! :D

Comments

[Kamil Naja]

Do you have any errors in console? You can try use {{hero?.nome}} syntax. Good way to debug this case, is <pre>{{hero | json}} </pre> - display this in your html

[Giuseppe VERGARI]

no error in console. I don't know why but i resolve this problem considering hero[] instead of hero. Then i use hero[0].nome to display the name.

[Kamil Naja]

So you get array of heroes - that a little strange, because your are searching by id ... I do not like this syntax - @Input() hero: Hero; - maybe you got this data from parent component?

[jrltt]

Hi, can you share the hero model

[Giuseppe VERGARI]

yes, here you have the hero's class ``` export class Hero { id: number; nome: string; cf: string; cognome: string; sesso: string; birthday: string; residenza:string; telefono:string; altezza: number; peso: number; } ```

[Giuseppe VERGARI]

i got an array with a single element. So it resolve my problem but yes it's a bit strange. i don't know if the @input sintax is the problem , should i try?

[jrltt]

Instead of use the [(ngModel)] have you try to use, like @KamilNaja says, the {{herp.nome}} ?? and if you can paste your project on StackBlitz, could help to see live the problem..

[Giuseppe VERGARI]

Yes i modify the hero's class to use hero.nome instead of hero.name