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

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 被多次调用。 如果我们发送输入 = 123.45。 pipe 应返回 123,45 并停止。 但是过滤器再次被调用。 再次输入变为 123.45。

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

Answer 1

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

而是在 controller 中调用 function，将响应保存到变量并在模板中使用绑定它。

Controller (*.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">