错误TypeError：无法将属性'googleUri'设置为null？使用接口进行2种方式绑定？

Question

我正在尝试与我的界面进行2way绑定，但一直获取'null的set属性'？

当我点击提交时，触发了onSave函数，我收到错误消息“无法将属性'googleUri'设置为null？”。控制台日志输出为null。如何在使用界面时解决此问题？

这是我的界面

export interface User {
    googleUri?: string;
}

这是我的HTML组件

<form name="form" (ngSubmit)="onSave()" #f="ngForm" novalidate>
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label for="googleUri">Google Excel Address</label>
                  <input type="text" class="form-control form-control-lg" name="googleUri" id="googleUri" [ngModel]="user?.googleUri" (ngModelChange)="user.googleUri=$event"/>
                </div>
              </div>
            </div>
</form>

我的组件TS

export class ProfileComponent implements OnInit {
  private user: User = {};
  public loading: boolean = false;

  constructor(private userService: UserService) { }

  ngOnInit() {
  }

  private onSave(): void {
    console.log(this.user);
    this.userService.saveUserSettings(this.user)
      .subscribe(
        data => console.log(data),
        err => console.log(err),
        () => this.loading = false
      );
  }
}

Answer 1

对于数据的两种方式绑定，您可以直接使用 [（ngModel）]
您可以将代码替换为以下代码：

<input type="text" name="googleUri" id="googleUri" [(ngModel)]="user.googleUri"/>

我已经创建了与您上面提到的示例相同的示例，并且可以做到
 来访问组件中的 googleUri 变量。

请通过以下内容进行验证：

  

是否已将用户界面导入组件中   正确与否??

请在此处查看演示示例。 Demo

希望这会对您有所帮助。 您可以检查以下结果图像：

Answer 2

将用户对象的“私人”更改为“公共”。

public user: User = {};

在模板中，可以使用pre打印模型对象。

<pre>
{{user | json}}
</pre>