如何订阅输入以将更改保存到对象中？

Question

我有一个 HTML 形式的输入，如下所示：

 <mat-form-field appearance="fill">
    <mat-label>Flowrate: </mat-label>
    <input id = "flowRate" type="number" matInput>
  </mat-form-field>

我稍后在我的 .ts 文件中订阅，如下所示：

private flowRateInput: any = document.getElementById('flowRate') as HTMLInputElement

 if (flowRateInput: any) {
  let flowObs = fromEvent(this.flowRateInput, 'input').pipe(
      debounceTime(500)
    ).subscribe(res => {
      this.calcData.flowRate = +this.flowRateInput.value;
      console.log(this.flowRateInput.value)
      console.log(this.calcData)
    })
  }

然而，当我打开页面并更改输入时，它似乎什么也没做。我猜我在订阅部分代码时做错了。

Answer 1

尝试这样的事情，使用 FormControl :

.html 文件:

<mat-form-field appearance="fill">
  <mat-label>Flowrate: </mat-label>
  <input id="flowRate" type="number" [formControl]="fcFlowRate" matInput>
</mat-form-field>

.ts 文件：

// Before constructor
fcFlowRate = new FormControl();

// In NgOnInit
this.fcFlowRate.valueChanges.pipe(debounceTime(500)).subscribe( value => {
  this.calcData.flowRate = +value;
  console.log(value)
  console.log(this.calcData)
})

Answer 2

您不需要下标，也不需要在 angular.

中执行 document.getElementById('flowRate')

你可以使用 ngModel 例如： <input type="number" matInput [(ngModel)]="flowRate">

private _flowRate="";
set flowRate(flowRate){
 this._flowRate = flowRate;
  this.calcData.flowRate = +this.flowRateInput.value;
}
get flowRate(){
 return this._flowRate;
}

或者你可以监听变化事件： <input type="number" matInput (change)="flowRateChange($event)> 或 <input type="number" matInput [ngModel]="flowRate" (ngModelChange)="flowRateChange($event)"

Answer 3

不鼓励在使用Angular时使用document.getElementById('flowRate')，相反，您应该使用template-driven形式或reactive-forms，这是angular的方式这样做。

我将展示 reactive-form 示例

首先在您的 app.module.ts 中导入 ReactiveFormsModule，以便 FormControls 在您的示例中工作。

<mat-form-field appearance="fill">
    <mat-label>Flowrate: </mat-label>
    <input [formControl]="flowRateControl" type="number" matInput>
</mat-form-field>

在您的 .ts 组件中

 flowRateControl: FormControl = new FormControl();

 ngOnInit(): void {
    this.flowRateControl.valueChanges.subscribe(val => {
            console.log(val);
       });
  }

此外，使用这种方法的好处是您可以使用多个 RxJs 运算符，例如 debounce、distinctUntilChanged，这可以提升您的用户体验。

如何订阅输入以将更改保存到对象中？

How to subscribe to input for it to save changes into an object?

html

javascript

rxjs

typescript

angular