Angular4 * ng如果不起作用/变量未定义

Question

I am trying to get in my view details of a chosen item. It seems like the *ngIf statement doesn't work. It renders a plain page instead of "details" of a chosen "person". For testing purposes I exchanged the *ngIf statement into a true one *ngIf="1" , then I managed to get the page markup rendered (it worked!), but

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

didn't work. So, it looks like my details.html knows nothing about person variable.

What should be done to get the details.html component rendered correctly?

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 It seems the problem is the person variable in details.component.ts which is undefined, although I declared it in the exported class.

Answer 1

The params property of the ActivatedRoute returns an observable which you need to subscribe to. So we'd have to change your code to something like this:

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

It's also advised to use paramsMap instead of params , which as its name describes will return a Map instead. So we can further change it to this:

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

Now we're using the get method on a map, pass it the key, in this case the name of your param and in the end, this'll basically give us the same result.

Another thing that is completely wrong with your code is the map operator. When working with Observables, we use the map operator, to mutate the data emitted. So for instance, this observable is emitting a Person. If you wanted just the person's name, you would use the map operator like this:

.map(person => person.name)

And if you're not used to this syntax, then this is equivalent:

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

The code that should run once you are receiving the desired data goes in the subscibe, which takes three arguments, but we usually only care about the first two, which are the success and error callback functions. Your final code should look something like this:

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

Answer 2

Your data is asynchronous so you have to use pipe async to render it:

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

Just add that pipe to interpolation and it will work.