Угловая 2: как получить некоторые данные из вложенных объектов json?

Question

Я хочу показать улицу человека. Но он не работал с кодом, который у меня есть. Думаю, я делаю это неправильно. (Чтобы получить имя человек работает отлично) JSon файл:

{ 
    "id":1, 
    "name": "someName", 
    "address":{ 
     "street":"someStreet", 
     "number":"10" 
    } 
} 

сервис прибудет JSON:

public getPerson(id:string):Observable<Person> { 
       return this.http.get(PersonService.PATH + id + '.json') 
        .map((res:Response) => res.json()); 
     } 

машинописи файл PersonDetail:

@Component({ 
    selector: "person", 
    template: ` 
     <h3>Detail of {{person.name}}</h3> --> this works 
     <p>{{person.address.street}}</p> --> this not 
        ` 
}) 
export class PersonDetail { 
    private person:Person = Person.createEmptyPerson(); 
    private router:Router; 

    constructor(personService:PersonService, params:RouteParams, router:Router) { 
     personService.getItem(params.get("id")).subscribe((person:Person) => { 
      this.person =person; 
     }); 
     this.router = router; 
    } 
} 

лицо:

import {Address} from "./address"; 
export class Person { 
    id:number; 
    name:string; 
    adress:Address; 


    constructor(id:number, name:string, adress:Address) { 
     this.id = id; 
     this.name = name; 
     this.adress = adress; 
    } 


    public static createEmptyPerson():Person{ 
     return new Person(0, "",null); 
    } 

} 

: Адресная

export class Address { 
    street:string; 
    number:number; 


    constructor(street:string, number:number) { 
     this.street = street; 
     this.number = number; 
    } 

    public static createEmptyAddress():Address { 
     return new Address("",0); 
    } 

} 

Answer 1

Я думаю, что он работает в самом начале для person.name, потому что вы создаете пустые человек в вашем PersonDetail компоненте. Но не для адреса, так как соответствующий адрес является недействительным:

public static createEmptyPerson():Person{ 
    return new Person(0, '',null); 
} 

Поскольку HTTP запросы являются асинхронными, полные данные для человека, там будет позже.

Я вижу два решения для вашей проблемы:

• Используйте ngIf вокруг содержимого шаблона:

  template: ` 
      <div *ngIf="person"> 
      <h3>Detail of {{person.name}}</h3> 
      <p>{{person.address.street}}</p> 
      </div> 
  ` 
  

• Как предложенный Эриком, используйте оператор Элвиса. Но будет отображаться Detail of, после чего ничего не появится.

  template: ` 
      <h3>Detail of {{person?.name}}</h3> 
      <p>{{person?.address?.street}}</p> 
  ` 
  

Answer 2

У вас нет опечатку на классе Person?

adress:Address 

Я считаю, что это должно быть

address:Address