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：无法读取Object.eval中未定义的属性'firstName'[as updateDirectives]

当我这样做时：<input [(ngModel)]="myPersonModel?.firstName"> 我没有看到该值，我收到此错误：未捕获（承诺）：错误：模板解析错误：分析器错误：'？'。运算符不能用于

中第27列的赋值

谢谢，

Answer 1

正如一位人士所说，服务请求是异步的。要解决您的问题，您可以在您声明它的组件中初始化myPersonModel。例如private myPersonModel: PersonModel = new PersonModel('','');。

您的另一个选择是使用Elvis运营商。像<input [ngModel]="myPersonModel?.name" (ngModelChange)="myPersonModel.name = $event" />这样的东西。

或者只是将输入包装在*ngIf="myPersonModel"中。

Http使用Observable和双向绑定获取请求

1 个答案: