Двусторонняя привязка данных с вводом поля mat-form для машинописного объекта, загруженного через http

Question

Работа с двухсторонней привязкой данных на угловых 2+.

1) В моем компоненте есть переменная: user: User, представляющая собой простой объект (модель) json, содержащий 2 поля: name, pass;

2) эта переменная заполняет onInitМетод через http-запрос:

 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:

User = new User(); 

Как с этим бороться?Как я могу сказать угловой не торопиться?Я правильно понимаю, что происходит?

Я пытался добавить "?"

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

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

Answer 1

Безопасная навигация / оператор Элвиса (?) в этом случае не работает, вы не можете использовать его с двусторонним связыванием, не выполняя дополнительную работу.

Либо вы создаете пустого пользователяобъект (как вы уже упоминали сами) или вы препятствуете визуализации ввода до тех пор, пока пользователь не будет загружен через что-то подобное:

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

Вы также можете пропустить часть ng-template, которая отображает информацию о загрузке.Это сильно зависит от того, что ожидается с точки зрения пользовательского опыта (загрузка информации, пустое текстовое поле или ничто ...)