私は次のようなコンポーネントを持っています：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app',
template: `
<div>
<div>value of a :
<input [(ngModel)]="a" />
</div>
<div>value of b :
<input [(ngModel)]="b" />
</div>
<div>
Value of a = {{a}}
<br> Value of b = {{b}}
<br> Sum instantaneous {{calc(a+b)}}
</div>
</div>
`
})
export class AppComponent implements OnInit {
a: string = "";
b: string = "";
constructor() { }
ngOnInit() {
}
calc() {
console.log('test');
return (+this.a + +this.b);
}
}
テキストボックス内の何かを変更する（たとえば、キーを押す）たびに、またはテキストボックスのフォーカス/フォーカス解除だけでも、「calc」関数が2回実行されます。
ここで何が欠けているのか、または関数を（2回ではなく）1回実行する方法を教えてください。
これは、変更検出がおそらく思っているよりも頻繁に実行されるため、特に開発者モードですべてが2回チェックされるために発生します。
まさにこの理由から、テンプレートから関数を呼び出すことは想定されていません。解決策の1つは、純粋関数として宣言できるパイプを使用することです。
@Pipe({name: 'calc'})
export class CalcPipe implements PipeTransform {
public transform(a: number, b: number): number {
return a + b
}
}
そして、このように使用します。
{{ a | calc : b }}
それ以外の場合は、クラスのプロパティを更新するカスタムロジックを作成することをお勧めします。次に、関数呼び出しの代わりにプロパティをバインドします。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加