javascript - 视图仅在某些情况下不更新
问题描述
此方法用于为输入添加千位分隔符。它将删除非数字字符,然后 pip 将在视图中添加分隔符。但是当输入类似于“ 12hy ”时它不起作用。如果输入类似于“ 12hy6 ”,它将按预期给出输出,例如“ 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
解决方案
试试这个解决方案。
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')"
>
检查工作演示
如果您仍然遇到问题,请告诉我。
推荐阅读
- java - 索引页面不起作用,但 api 适用于 AWS beanstalk Sprint Boot
- c++ - 如何在 C++11 中使用 tinyutf8 在另一个 utf8_string 中找到 utf8_string?
- android - Kotlin 扩展视图绑定:“重载分辨率歧义..”自定义按钮上的编辑器错误
- dart - 如何制作水槽
格式化 Stream 的结果 ? - node.js - Heroku Node 应用程序在将文件上传到 S3 时崩溃(消息:'标题内容包含无效字符')
- processing - 打印到文件只打印最后一行
- algorithm - 检查多米诺骨牌金字塔的有效性
- python - 如何在包含冒号的单词之前插入换行符
- c# - 为什么我在 Main 方法中创建方法时不能使用修饰符?
- javascript - 如何使用 Babylon.js 的外部颜色选择器更改颜色?