Угловая строковая интерполяция выводит пустую строку на значение объекта JSON

Question

В моем классе машинописи:

user = {
    username: '',
    email: '',
    secret: '',
    gender: '',
    answer: '',
};

у меня есть кнопка onSubmit:

onSubmit() {
    this.submitted = true;
    console.log(this.form);
    this.user.username = this.form.value.userData.username;
    console.log(this.user.username);
}

и в моем HTML:

<div class="row" *ngIf="submitted">
    <div class="col-xs-12">
        <h3>Your Data</h3>
        <p>Username: {{ user.username }}</p>
    </div>
</div>

Журнал консолиясно печатает значение user.username, и я вижу его в консоли.Но HTML показывает только:

Ваши данные

Имя пользователя:

Answer 1

Предыдущий ответ решит вашу проблему.Я сделал это здесь: https://stackblitz.com/edit/angular-hirffj

Но вы можете еще больше упростить свой код, если используете двустороннее связывание.

        <input
         type="text" 
         id="username" 
         class="form-control"
         [(ngModel)]="user.username"
         name="username"
         required>

Тогда ваш элемент ввода иВаше свойство user.username будет синхронизировано.

Также обратите внимание, что setValue и patchValue, показанные в коде компонента, предназначены для reactive forms, а не template driven forms.Поскольку вы используете template driven forms, если вы переключитесь на двустороннее связывание, вы можете установить значения в форме, просто используя свойства объекта:

  suggestUserName() {
    this.user.username = 'Superuser';
  }

Answer 2

Согласно вашему коду https://pastebin.com/1nSHRCPb

Проблема возникла из-за строки 18

    ...
    #user="ngModel">

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