Question

我想展示一个人的街道。但它并没有使用我所拥有的代码。我想我做错了。（让一个人的名字完美地运作） json文件：

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

service get json：

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

typescript文件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);
    }

}

ADDRES：

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组件中创建了一个空人。但不是因为相应的地址是空的<：p>

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

根据Eric的建议，使用Elvis运算符。但是会显示Detail of之后没有任何内容。
```
template: `
  <h3>Detail of {{person?.name}}</h3>
  <p>{{person?.address?.street}}</p>
`
```

Answer 2

你的Person课程上有没有错字？

adress:Address

我认为应该是

address:Address

Angular 2：如何从嵌套的json对象中获取一些数据？

2 个答案: