如何将变量从 .ts 传递到 html

Question

我正在使用 angular 网站提供的 Hero 演示。我修改它以保留来自我的其余服务器的数据。一切正常，但是当我尝试打开英雄的详细信息时，它错过了打印每个细节，如名字姓氏 ecc...

我认为 "hero-detail.component.ts" 和 "hero-detail.component.html" 之间有问题。

当我尝试打印 this.hero.nome 时，它什么也没显示，所以我认为这是一个空的 class。

我的休息服务器确认它发送正确的所有信息。

这是我的英雄-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());
  }
}

还有我的英雄-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>

在 HTML 文件中，我想显示我的休息服务器提供的英雄的名字和姓氏

Answer 1

我想我们在这里有一个错误，如果我假设您正在使用 angular 页面上的 Heros 项目，服务的响应将是英语，而不是意大利语。

<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>

然后

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

将会

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

hero.nome 将是 hero.name 我猜 user.cognome 将是 user.lastname.

希望对您有所帮助！ :D

如何将变量从 .ts 传递到 html

How to pass variable from .ts to html

angular-template

angular