在后端Java EE的表中获取一个带Angular2的元素

Question

I try to make an application with Angular2 for the FrontEnd and JavaEE for the BackEnd. By following some demo, I finally understand how the data are exchange but I got a little issue when I want to recoup one element in a table.

The code in the 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;
}

in my 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
    }
}

in my template, I did this :

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

and I got this type of error :

Cannot read property 'id' of undefined

and to conclude, at the adress " http://localhost:8080/SWBackend/jaxrs/Person ", I have my list of person, so it's good, and at " http://localhost:8080/SWBackend/jaxrs/Person/5 " I have the person I want, but I don't understand why I can't display it.

Answer 1

try this

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

sometimes it will take some time to get data from database and view will render before so angular will throw an error like this.

By using ? angular will not allow to throw any error even if data is not present there