javascript - Vizualizarea nu se actualizează DOAR în anumite cazuri

Această metodă este folosită pentru a adăuga separatoare de mii pentru o intrare. Va elimina caracterele nenumerice și apoi pip va adăuga separatoare în vizualizare. Dar când intrarea este ceva de genul "12hy" nu funcționează. Dacă intrarea este de genul "12hy6", va oferi rezultatul așteptat, cum ar fi "126".

Ce nu înțeleg? Când fac depanarea, de fapt modelul se schimbă așa cum mă așteptam. DAR vizualizarea rămâne la fel.

În codul modelului este așa ->

public onInputChange(event: string , id: any): any {

        switch (id) {
            case 'mgtFeeFromValue': {
                this.mgtFeeFromValue = this.changeText(event);
                console.log(this.mgtFeeFromValue);
                break;
            }


            default: {
                this.loggerService.logError('Cannot find case in switch statement line : 730');
                break;
            }
        }
    }

public changeText(str: string): any {
        if (typeof str === 'string') {
            const formattedNumber = parseFloat(str.replace(/\D/g, ''));
            return formattedNumber;
        } else if (typeof str === 'number') {
            return  str;
        }
    }

În vizualizare ->

<input
    [ngModel]="mgtFeeFromValue | number:'1.0-5'"
    (ngModelChange)="onInputChange($event ,'mgtFeeFromValue')"
    maxlength="8"
    class="reset-input-style w-100 text-right"
>

Iată un exemplu funcțional ->

https://stackblitz.com/edit/angular-g5l4ra?embed=1&file=src/app/app.component.ts

Răspuns #1

încearcă această soluție.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { DecimalPipe } from '@angular/common';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
  providers: [DecimalPipe]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { DecimalPipe } from '@angular/common';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  public mgtFeeFromValue: any;

  constructor(private _decimalPipe: DecimalPipe) {}

public onInputChange(event: string , id: any): any {
  console.log(event, id)

        switch (id) {
            case 'mgtFeeFromValue': {
                let temp = this.changeText(event);
                this.mgtFeeFromValue = this._decimalPipe.transform(temp, '1.0-5');
                // console.log(this.mgtFeeFromValue);
                break;
            }

            default: {
              console.log('Shit happens');
                break;
            }
        }
    }


  public changeText(str: string): any {
        if (typeof str === 'string') {
            const formattedNumber = parseFloat(str.replace(/\D/g, '').concat(' '));
            return formattedNumber;
        } else if (typeof str === 'number') {
            return  str;
        }
    }
}

app.component.html

<input
    type="text"
        [(ngModel)]="mgtFeeFromValue"
        (keyup)="onInputChange($event.target.value ,'mgtFeeFromValue')"
    >

verifică demonstrația funcțională

Te rog să mă anunți dacă încă întâmpini probleme.

Răspunsul #2

Nu știu de ce, dar funcționează dacă îți înfășori codul în setTimeout (așa cum se arată mai jos), sper că cineva să explice asta.

public onInputChange(event: string, id: any): any {
setTimeout(() => {
switch (id) {
        case "mgtFeeFromValue": {
          this.mgtFeeFromValue = this.changeText(event);
          console.log(this.mgtFeeFromValue);
          break;
        }

        default: {
          console.log("Cannot find case in switch statement line : 730");
          break;
        }
      }
}, 100)
}

*Un alt lucru: trebuie să folosești legătura bidirecțională pentru a actualiza vizualizarea în șablon și invers