ОШИБКА TypeError: Не удается установить свойство 'googleUri' для null?Использование интерфейса для 2-х сторонней привязки?

Question

Я пытаюсь выполнить двухстороннее связывание с моим интерфейсом, но получаю 'set property of null'?

Когда я нажимаю на кнопку submit, которая вызывает функцию onSave, я получаю сообщение об ошибке «Не удается установить свойство 'googleUri' для 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

Измените private на 'public' для объекта пользователя.

public user: User = {};

В шаблоне вы можете распечатать объект модели с пред.

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

Answer 2

Для двухстороннего связывания данных вы можете напрямую использовать [(ngModel)]
Вы можете заменить свой код следующим кодом:

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

Я создалтот же пример, что вы упомянули выше, и я могу
получить доступ к переменной googleUri в компоненте.

Пожалуйста, подтвердите следующую вещь:

правильно ли вы импортировали пользовательский интерфейс в компоненте ??

Пожалуйста, посмотрите демонстрационный пример здесь. Демо

Надеюсь, это поможет вам.Вы можете проверить приведенное ниже изображение результата: