Question

我正在使用从angular网站提供的Hero演示。我对其进行了修改，以保留其余服务器中的数据。没关系，但是当我尝试打开英雄的详细信息时，它会错过打印每个细节的信息，例如姓ecc ...

我认为“ hero-detail.component.ts”和“ hero-detail.component.html”之间存在问题。

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

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

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

和我的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>

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

Answer 1

我想我们在这里有一个错误，如果我支持您从角度页面使用Heros项目，那么服务的响应将是英语，而不是意大利语。

describe('index page should render, hello world', () => {
it('should render hello world 200', (done) => {     
    chai.request(router).get('/').then((res)=>{
                expect(res.body.message).to.equal("Hello World");
                expect(res).to.have.status(200);
                done();
            })
    })    
})

然后

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

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

希望有帮助！：D

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

1 个答案: