Angular 字符串插值在 JSON 对象值上打印空字符串

Question

在我的打字稿中 class:

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://pastebin.com/1nSHRCPb

第 18 行出现问题

    ...
    #user="ngModel">

您已经创建了一个模板变量 user。这就是为什么在模板中调用 user.username 时什么也得不到的原因。

Answer 2

前面的回复会解决你的问题。我在这里做了一个 stackblitz：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';
  }

Angular 字符串插值在 JSON 对象值上打印空字符串

Angular string interpolation prints empty string on JSON object value

angular

typescript

angular-forms

angular-template