ngModel 两种方式绑定在 Angular 中不起作用答案

【问题标题】：ngModel Two way binding not working in AngularngModel 两种方式绑定在 Angular 中不起作用
【发布时间】：2021-02-15 19:46:34
【问题描述】：

<input matInput placeholder="username" [(ngModel)]="userId">
<input matInput placeholder="name" [(ngModel)]="name">

我也导入了 FormsModule

import { FormsModule } from '@angular/forms'

@NgModule({
  declarations: [
    AppComponent,
    UserInputComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'app-user-input',
  templateUrl: './user-input.component.html',
  styleUrls: ['./user-input.component.css']
})

export class UserInputComponent implements OnInit {

 userId: string = 'userId';
 name: string = 'name';
  constructor() { }

  ngOnInit(): void {
  }

  
  }
}

初始值正在控制台中打印，但当输入新值时，变量 userId 和 name 不会更新。如果我没有为 userId 和 name 提供初始值，那么即使在从输入中输入它们之后，在控制台上打印它们也会给我 undefined 。请帮我找出问题所在。

编辑该问题已通过在输入标记中包含名称属性得到解决。

【问题讨论】：

请分享一个最小的工作 StackBlitz 以了解您的实现并回复它。
你的 console.log() 在哪里？你如何用它来打印你想看的东西？
我有一个附加到按钮的点击事件。我正在将值打印到那里的控制台
你在哪个角度版本上工作？
如果您只使用 ngModel 独立，在某处没有表单，则不必为输入指定名称。但是当你在表单中使用它时，name 属性就变成了强制性的！

标签： angular typescript ngmodel

【解决方案1】：

您未发布完整代码。但无论如何我添加按钮和点击事件。现在，当您单击需要更新模型时，它将更新值。目前您是第一次分配，但是当单击时您没有为输入分配新值

<input matInput placeholder="username" [(ngModel)]="userId">
    <input matInput placeholder="name" [(ngModel)]="name">
    <button (click)="test(event)" value="click"/>



import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'app-user-input',
  templateUrl: './user-input.component.html',
  styleUrls: ['./user-input.component.css']
})

export class UserInputComponent implements OnInit {

 userId: string = 'userId';
 name: string = 'name';
  constructor() { }

  ngOnInit(): void {
  }

test(e){
userId=e.target.value;
name=e.target.value;
}

  
  }
}

【讨论】：

感谢瓦吉德。正如我在编辑中提到的，我的问题是通过简单地添加一个名称属性来解决的。事实证明，对于输入标签，ngModel 需要一个 name 属性。