通过 http 加载的打字稿对象上的 mat-form-field 输入的 2 向数据绑定

Question

在 angular 2+ 上使用双向数据绑定。

1) 我的组件中有一个变量：user: User，它是一个简单的 json 对象（模型），包含 2 个字段：name、pass；

2) 此变量通过 http 请求填写 onInit 方法：

 this.userService.getUser.subscribe(res => {
      this.user = res;
}

3) 在我的 html 上，我想显示当前名称并在用户变量 (ts) 和输入字段 (html) 之间双向绑定它。为此我做了：

<mat-form-field>
       <input  matInput type="text" id="name" [(ngModel)]="user.name" name="name"
               placeholder="name">
     </mat-form-field>
</form>

^ 目前 submit() 仅将用户打印到控制台。

以上所有工作都很好，除了它在控制台中打印错误：无法读取未定义的属性 'name'。看起来在从服务器获取用户的请求正在进行时，angular 正在尝试显示 html 并且存在未定义的用户对象。当我立即使用空对象初始化用户时错误消失：用户：

User = new User();

如何处理？我怎么告诉 angular 不要着急？我是否正确理解正在发生的事情？

我尝试添加“？”在

[(ngModel)]="user?.name"

为了使其有点可选，又出现了一个错误。

Answer 1

安全导航/Elvis 运算符 (?) 在这种情况下不起作用，如果不做更多的工作，您不能将它与 two-way 绑定一起使用。

要么你正在实例化一个虚拟用户对象（正如你自己已经提到的），要么你阻止呈现输入，直到通过类似的东西加载用户：

<input [(ngModel)]="user.name" *ngIf="user else userIsLoadingInfo" matInput id="name" name="name">
<ng-template #userIsLoadingInfo>Loading...</ng-template>

您也可以省略显示加载信息的 ng-template 部分。这在很大程度上取决于用户体验角度的预期（加载信息与空文本框与无...）

通过 http 加载的打字稿对象上的 mat-form-field 输入的 2 向数据绑定

2-way databinding with mat-form-field input on typescript object loaded thru http

angular

2-way-object-databinding