Angular，将输入字段重置回默认值

Question

在下面的示例中，我希望能够将输入字段重置为默认值，(在用户手动更改输入值之后)

主要问题是，默认值永远不会改变，所以重新设置它没有任何作用

模板

<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;
}
}

Answer 1

你可以使用模板变量:

<input [value]="defaultValue" #input />
<button (click)="input.value = 10">Reset to default Number</button>

参见StackBlitz示例。

Answer 2

尝试使用[(ngModel)]来更新按钮点击的值。

<input [(ngModel)]="defaultValue" />