javascript - Angular4 *ng如果不工作/变量未定义

Question

我正在尝试查看所选项目的详细信息。看起来 *ngIf 语句不起作用。它呈现一个普通页面，而不是所选“人”的“详细信息”。出于测试目的，我将 *ngIf 语句交换为真正的 *ngIf="1"，然后我设法渲染页面标记(它有效!)，但是

{{ person.name }} and `{{ person.id }}`

没用。因此，看起来我的 details.html 对 person 变量一无所知。

应该怎样做才能正确渲染details.html组件？

person.service.ts

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

import { IPerson } from '../persons/person';

@Injectable()
export class PersonService {
  private _personUrl = './assets/persons.json';

  constructor(private _http:Http){}

  getPersons(): Observable<IPerson[]> {
    return this._http.get(this._personUrl)
    .map((response: Response) => <IPerson[]>response.json().personsData)
  }

   getPerson(id:number): Observable<IPerson>{
    return this.getPersons()
    .map(persons => persons.find(person => person.id === id));
  }

}

details.component.html

<div *ngIf="person" class="container">
  <h3>Person Details</h3>
  <div class="col-md-12">
     <div>{{ person.name }}</div>
     <div>{{ person.id }}</div>
  </div>

  <button (click)="goBack()">Back</button>
</div>

details.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { PersonService } from '../service/person.service';
import { IPerson } from '../persons/person';

@Component({
   selector: 'app-details',
   templateUrl: './details.component.html',
  styleUrls: ['./details.component.css'] 
})
export class DetailsComponent implements OnInit {
  public person: IPerson;

  constructor(
    private _PersonService: PersonService,
    private route: ActivatedRoute
    ) { }

  ngOnInit(): void {
    this.route.params.forEach((params: Params) => {
        let id = +params['id'];
        this._PersonService.getPerson(id)
    .map(person => this.person = person).subscribe();
    })
  }


}

persons.json

{
  "personsData" : [
    {
      "id": 1,
      "name": "KC"
    },
    {
      "id": 2,
      "name": "KN"
    },
    {
      "id": 3,
      "name": "DG"
    }]
 }

UPD问题似乎是 details.component.ts 中的 person 变量未定义，尽管我在导出的类中声明了它。

Answer 1

params ActivatedRoute的属性(property)返回一个您需要订阅的可观察对象。因此，我们必须将您的代码更改为如下所示:

this.route.params.subscribe(...)

还建议使用paramsMap而不是params ，正如其名称所描述的，它将返回一个 Map。所以我们可以进一步改成这样:

this.route.paramMap.subscribe(paramMap => paramMap.get('id'))

现在我们使用 get map 上的方法，将其传递给键，在本例中为参数的名称，最后，这基本上会给我们相同的结果。

您的代码完全错误的另一件事是 map运算符(operator)。使用 Observables 时，我们使用映射运算符来改变发出的数据。例如，这个 observable 正在发出一个 Person。如果您只想要此人的姓名，您可以使用 map 运算符，如下所示:

.map(person => person.name)

如果您不习惯这种语法，那么这是等效的:

.map(person => {return person.name})

收到所需数据后应运行的代码将放入 subscibe 中，该函数需要三个参数，但我们通常只关心前两个，即成功和错误回调函数。您的最终代码应如下所示:

this.route.paramMap.subscribe(params => 
    this._PersonService.getPerson(+params.get('id'))
        .subscribe((person) => this.person = person, () => {  //do something on error}))