Question

HTML : (component.html)

<input #CostInput class="form-element" formControlName="cost" [value]="replaceDecimal.transform(FormGroup.get('cost').value)">

Pipe.ts：

commaLocaleCodes = ['AM', 'AR'];
transform(input) {
        if (input) {
            const uiLanguage = 'am');
            if (this.commaLocaleCodes.indexOf(uiLanguage.toUpperCase()) > -1) {
                return input.replace(".", ",");
            } else {
                return input.replace(",", ".");
            }
        }
    }

这里的问题是 Pipe 被多次调用。如果我们发送 input = 123.45 。管道应返回 123,45 并停止。但是过滤器再次被调用。再次输入变为 123.45。

管道已经很纯了。我想了解我们是否可以在第一次迭代后停止管道。谢谢。

Answer 1

使用默认的变更检测策略，绑定到属性（或指令）的函数将在每个变更检测周期被触发。这就是为什么不鼓励将函数绑定到属性和指令的原因。

改为调用控制器中的函数，将响应保存到变量并在模板中使用绑定。

控制器 (*.ts)

export class SomeComponent implements OnInit {
  transformedValue: any;

  ngOnInit() {
    this.transformedValue = this.replaceDecimal.transform(FormGroup.get('cost').value);
  }
}

模板 (*.html)

<input #CostInput class="form-element" formControlName="cost" [value]="transformedValue">

PIPE 被多次调用，我怎样才能让它只调用一次？

1 个答案: