Angular Update 更新文本输入值的更有效方式答案

【问题标题】：Angular Update more efficient way to update text input valueAngular Update 更新文本输入值的更有效方式
【发布时间】：2020-07-30 13:14:12
【问题描述】：

我正在更新一个 Angular 应用程序以在旧机器上工作，我想知道是否有更有效的方法来更新文本输入字段，而不是 (keyup)，它会在每次击键时更新。我找不到任何需要更少请求的东西。谢谢！

【问题讨论】：

标签： angular typescript input

【解决方案1】：

您将 ReactiveForms 与 rxjs 一起使用：

form: FormControl = new FormControl();

ngOnInit() {
  this.form.valueChanges.pipe(
    debounceTime(1000), // delay until the user stops typing
    switchMap(value => {
      return this.http....
      })
  ).subscribe();
}

在您的模板中：

<input [formControl]="formControl">

并将ReactiveFormsModule 添加到您的 ngModule 的导入数组中。

【讨论】：

如何将其分配给输入值？目前有什么 (keyup)="update($event)
去掉keyup部分，加上formControl指令

【解决方案2】：

你可以使用 ReactiveFormsModule

    const inputControl = new FormControl();

    inputControl.valueChanges.pipe(
        debounceTime(500)
    ).subscribe(value => {
        // use input value
    });

<input [formControl]="inputControl" />

【讨论】：