Question

我有一个绑定到数据的控件。

<input [value]="myData">

这是一种绑定方式。可以说我在输入中输入了一些内容。 myData不会改变。如何将控制值重置回myData？

Answer 1

这是在代码中执行此操作的一种方法：

将myData设置为其他值（例如，空字符串）
致电ChangeDetectorRef.detectChanges
将myData设置回原始值

public myData = "Hello world!";

constructor(private changeDetectorRef: ChangeDetectorRef) { }

private refreshInputDisplay(): void {
    const oldData = this.myData;
    this.myData = "";
    this.changeDetectorRef.detectChanges();
    this.myData = oldData;
}

有关演示，请参见this stackblitz。

Answer 2

您可以使用ViewChild并相应地设置其值：

HTML

<input [value]="myData" #oneWayInput />

组件TS

// A property in your component
@ViewChild('oneWayInput') oneWayInput: ElementRef;

// When you want to revert the value in the input
this.oneWayInput.nativeElement.value = this.myData;

或者您可以使用双向绑定，将初始值捕获到一个单独的变量中，然后在需要时将绑定值设置为初始值：

initialValue: string;
myData: string;

// Where you set myData
this.initialValue = this.myData;

// Reset value
this.myData = this.initialValue;

如何将角度控件的值重置为其绑定？

2 个答案: