Tengo una entrada en forma de HTML como esta:
<mat-form-field appearance="fill"> <mat-label>Flowrate: </mat-label> <input id = "flowRate" type="number" matInput> </mat-form-field>A lo que me suscribo más adelante en mi archivo .ts así:
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) }) }Sin embargo, parece que no hace nada cuando abro la página y cambio la entrada. Supongo que hice algo mal al suscribir parte del código.
Prueba algo como esto, usando FormControl :
archivo .html:
<mat-form-field appearance="fill"> <mat-label>Flowrate: </mat-label> <input id="flowRate" type="number" [formControl]="fcFlowRate" matInput> </mat-form-field>archivo .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) })no necesita subíndice y no necesita hacer document.getElementById('flowRate') en angular.
puede usar ngModel por ejemplo: <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; } o puede escuchar el evento de cambio: <input type="number" matInput (change)="flowRateChange($event)> o <input type="number" matInput [ngModel]="flowRate" (ngModelChange)="flowRateChange($event)"
No se recomienda usar document.getElementById('flowRate') cuando usa Angular; en su lugar, debe usar formularios basados en plantillas o formularios reactivos, que es la forma angular de hacerlo.
Voy a mostrar el ejemplo de forma reactiva
Primero importe ReactiveFormsModule en su app.module.ts , para que FormControls funcione en su ejemplo.
<mat-form-field appearance="fill"> <mat-label>Flowrate: </mat-label> <input [formControl]="flowRateControl" type="number" matInput> </mat-form-field> En su componente .ts
flowRateControl: FormControl = new FormControl(); ngOnInit(): void { this.flowRateControl.valueChanges.subscribe(val => { console.log(val); }); } Además, los beneficios de usar este enfoque son que puede usar múltiples operadores RxJs como debounce , distinctUntilChanged que pueden mejorar su experiencia de usuario.