Получить один элемент с Angular2 в таблице на бэкэнд Java EE

Question

Я пытаюсь сделать приложение с Angular2 для FrontEnd и JavaEE для BackEnd. Следуя некоторой демонстрации, я, наконец, понимаю, как данные обмениваются, но у меня возникла небольшая проблема, когда я хочу вернуть один элемент в таблицу.

Код в person.service.ts:

export class PersonService { 
private baseUrl: string = 'http://localhost:8080/SWBackend/jaxrs'; 

constructor(private http: Http) {} 

    get(id: number): Observable<Person> { 
    let person$ = this.http 
     .get(`${this.baseUrl}/Person/${id}`, {headers: this.getHeaders()}) 
     .map(mapPerson); 
     return person$; 
    } 

private getHeaders() { 
    let headers = new Headers(); 
    headers.append('Accept', 'application/json'); 
    headers.append('Content-Type', 'application/json'); 
    return headers; 
    } 
} 


function mapPerson(response: Response): Person { 
    return toPerson(response.json()); 
} 

function toPerson(r: any): Person { 
    return r; 
} 

в моих person.component.ts:

export class PersonComponent implements OnInit{ 
    people: Person[] = [] ; 
    pre: Person; 

    constructor(private personService: PersonService){} 

    ngOnInit(){ 
     this.personService 
     .get(5) 
     .subscribe(p => this.pre = p); 
     this.personService.getAll().subscribe(p => this.people = p); 
     // I get another method getAll who list all the people 
     // and works with almost the same code as get 
    } 
} 

в моем шаблоне, я сделал это:

<p> {{pre.id}}</p> 

и я получил этот тип ошибки:

Cannot read property 'id' of undefined 

и в заключение, по адресу «http://localhost:8080/SWBackend/jaxrs/Person», у меня есть список людей, так что это хорошо, и в «http://localhost:8080/SWBackend/jaxrs/Person/5« У меня есть человек, которого я хочу, но я не понимаю, почему я не могу отображать Это.

Answer 1

попробовать это

<p> {{pre?.id}}</p> 

иногда это займет некоторое время, чтобы получить данные из базы данных и вида воздаст перед таким Угловым выдаст ошибку, как это.

С помощью ? углового не позволит бросать какие-либо ошибки, даже если данных нет там