<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 。 请帮我找出问题所在。
编辑 该问题已通过在输入标签中包含名称属性得到解决。
答案 0 :(得分:0)
您没有发布完整的代码。但无论如何我添加按钮和点击事件。现在,当您单击时,您需要更新模型,然后它将更新值。目前您是第一次分配,但单击时您不会为输入分配新值
<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;
}
}
}