Question

<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 。请帮我找出问题所在。

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

Answer 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 双向绑定在 Angular 中不起作用

1 个答案: