Question

此方法用于为输入添加千个分隔符。它将删除非数字字符，然后pip将在视图中添加分隔符。但是，当输入类似“ 12hy”时，它将不起作用。如果输入是类似“ 12hy 6”，它将按预期方式给出输出，如“ 126”。

我不了解什么？，实际上在调试中模型会按预期更改。但是视图是相同的。

在模型代码中是这样的->

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;
        }
    }

在视图中->

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

这是一个可行的示例->

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

Answer 1

尝试此解决方案。

app.module.ts

searchButton.setOnClickListener(v -> {

            receiptGetter("userName", (success) -> {
                if (success) {
                    String receipt = expensesList.toString();
                    receiptText.setText(receipt);
                } else
                    Log.d("error", getString(R.string.ErrorOccured));
            });

app.component.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.html

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;
        }
    }
}

检查working demo

如果您仍然遇到问题，请告诉我。

Answer 2

我不知道为什么，但是如果您将代码包装在setTimeout中（如下所示），它会起作用，希望有人对此进行解释。

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)
}

*您还必须使用2向绑定将视图更新为模板，反之亦然

仅在某些情况下视图不会更新

2 个答案: