在下面的示例中,我希望能够将输入字段重置为默认值,(在用户手动更改输入值之后)
主要问题是,默认值永远不会改变,所以重新设置它没有任何作用
模板
<div>
<label>Select a number </label>
<input [value]="defaultValue" />
<button (click)="onClick()">Reset to default Number</button>
</div>
组件
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
defaultValue = 10;
onClick() {
//wont work, because we are not changing the default.
this.defaultValue = 10;
}
}
你可以使用模板变量:
<input [value]="defaultValue" #input />
<button (click)="input.value = 10">Reset to default Number</button>
参见StackBlitz示例。
尝试使用[(ngModel)]来更新按钮点击的值。
<input [(ngModel)]="defaultValue" />