Question

我想在输入中有值（来自ngModel），最后要有百分比符号'％'。当我尝试使用自定义管道进行操作时，一开始一切都很好，但是当我从输入中删除值并进行更改时，每次输入键盘时都会添加该百分比。我该如何更改？我需要允许类型，例如“ 40”，然后添加“％”，在“ 4”之后立即添加。例： https://stackblitz.com/edit/angular-ppkbwn?file=src%2Fapp%2Fapp.module.ts

Answer 1

您可以先删除%。像这样（假设您总是要使用％符号显示数字）：

@Pipe({ name: 'myPipe'})
export class MyPipe implements PipeTransform {
    transform(val) {
        debugger

        val = val.replace('%','');

        if (String(val).indexOf('%') === -1) {
            return val + '%';
        } else {
            return val
        }
    }
}

Answer 2

@Pipe({ name: 'myPipe'})
export class MyPipe implements PipeTransform {
   transform(val) {
    if(String(val) === ''){
        return val;
    }else if (String(val).indexOf('%') === -1) {
        return val + '%';
    } else {
        return val
    }
   }
}

我认为您首先应该有一个if条件来检查

Answer 3

您不需要管道。您可以在输入字段上使用(focusout)来实现它

<input (focusin)="start($event)" (focusout)="end($event)" type="text" />

在您的ts文件中

start(e){
    if(e.target.value.indexOf('%') < 0)
    e.target.value =  e.target.value + '%';}
end(e){
   e.target.value = e.target.value.replace('%','');}

将百分比添加到ngModel值Angular 6（管道）

3 个答案: