Question

我正在尝试查看所选项目的视图详细信息。似乎 * ngIf 语句不起作用。它呈现一个纯页面而不是＆＃34;细节＆＃34;被选中的人＃34; 出于测试目的，我将 * 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的{{1}}属性返回您需要订阅的observable。因此，我们必须将您的代码更改为以下内容：

ActivatedRoute

还建议使用this.route.params.subscribe(...)代替paramsMap，正如其名称所描述的那样，将返回地图。所以我们可以进一步改变它：

params

现在我们在地图上使用this.route.paramMap.subscribe(paramMap => paramMap.get('id'))方法，传递密钥，在这种情况下是您的参数的名称，最后，这基本上给了我们相同的结果。

您的代码完全出错的另一件事是get运算符。使用Observable时，我们使用map运算符来改变发出的数据。因此，例如，这个可观察者正在发出一个人。如果你只想要这个人的名字，你可以使用这样的地图运算符：

map

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

.map(person => person.name)

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

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

Answer 2

您的数据是异步的，因此您必须使用管道异步来呈现它：

https://angular.io/api/common/AsyncPipe

只需将该管道添加到插值中即可。

Angular4 * ngIf无效/变量未定义

2 个答案: