Http получить запрос с наблюдаемой и двунаправленной привязкой

Question

Код a выполняет HTTP-вызов и возвращает Observable<PersonModel> (одно значение, а не []).Я положил результат в переменную myPersoneModel.Я хотел бы сделать двунаправленную привязку данных (чтобы сделать пост HTTP позже).Я получил ошибку в зависимости от синтаксиса [(ngModel)], который я использую в <input type="text">.

У вас есть идея?

export class SpecialityModel {
    firstName: string;
    lastName: string;

    constructor(
    firstName: string,
    lastName: string){
        this.lastName = lastName;
        this.firstName = firstName;
    }
}

getPerson(id:number): Observable<PersonModel> {
    let apiURL = `http:............/person/${id}`; 

    return this.http.get(apiURL) 
      .map((res: Response) => res.json().response);
}

В компоненте:

private myPersonModel: PersonModel;

ngOnInit() {
    this.myService.getPerson(5).subscribe( data => {
        this.myPersonModel = new PersonModel (data.lastName, data.firstName);
    });
}

В шаблоне:

Когда я делаю это: <input [(ngModel)]="myPersonModel.firstName"> Я вижу значение, но в консоли я получаю некоторые ошибки: TypeError: Невозможно прочитать свойство 'firstName' из undefined at Object.eval [as updateDirectives]

Когда я делаю это: <input [(ngModel)]="myPersonModel?.firstName"> Я не вижу значения и получаю эту ошибку: Uncaught (в обещании): Ошибка: Ошибки синтаксического анализа шаблона: Ошибка синтаксического анализатора: «?.»оператор не может использоваться в назначении в столбце 27 в

Спасибо,

Answer 1

Как упомянул один человек, запрос на обслуживание является асинхронным.Чтобы исправить вашу проблему, вы можете инициализировать myPersonModel в вашем компоненте, где вы его объявили.Например, private myPersonModel: PersonModel = new PersonModel('','');.

Другой вариант - использовать оператор Элвиса.Что-то вроде <input [ngModel]="myPersonModel?.name" (ngModelChange)="myPersonModel.name = $event" />.

Или просто оберните вход в *ngIf="myPersonModel".