問題タブ [angular2-changedetection]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - Angular2 - チェック後に式が変更されました - サイズ変更イベントによる div 幅へのバインド
このエラーについていくつか読んで調査しましたが、私の状況に対する正しい答えはわかりません。enableProdMode()
開発モードでは、変更検出が 2 回実行されることは理解していますが、問題を隠すために使用するのは気が進まない.
これは、div の幅が拡大するにつれて、テーブル内のセルの数が増加する必要がある簡単な例です。(div の幅は画面幅だけの関数ではないため、@Media は簡単に適用できないことに注意してください)
私の HTML は次のようになります (widget.template.html):
これ自体は何もしません。これは、変更検出が発生する原因が何もないためだと思います。ただし、最初の行を次のように変更し、空の関数を作成して呼び出しを受け取ると、機能し始めますが、「チェックされた後に式が変更されました」エラーが発生することがあります。
私の最善の推測では、この変更により変更検出がトリガーされ、すべてが応答を開始しますが、幅が急速に変化すると、div の幅を変更するよりも前の変更検出の反復が完了するのに時間がかかるため、例外がスローされます。
- 変更検出をトリガーするためのより良い方法はありますか?
- 変更検出が確実に行われるようにするには、関数を介してサイズ変更イベントをキャプチャする必要がありますか?
- #widthParentDiv を使用して div の幅にアクセスできますか?
- より良い全体的な解決策はありますか?
私のプロジェクトの詳細については、この同様の質問を参照してください。
ありがとう
ajax - テンプレートから関数を一度だけ呼び出す方法は?
angular2 テンプレート内で関数呼び出しを使用します。関数自体は、http.get() を使用して http ネットワーク リクエストを実行し、実際には CSS スタイル オブジェクトである any[] の Observable を返します。
しかし、上記のコードは無限ループを引き起こします! この関数lookupStyle
は、angular2 の変更検出が行われるたびに評価されます。http.get()
変更検出の実行をトリガーするため、http 要求が完了した後に関数がlookupStyle
再評価されます - 無限ループがあります。
angularに関数をlookupStyle
1回だけ評価するように指示できる解決策またはより良い方法はありますか? 今、私はビューモデルでいくつかの魔法を思いつくことができると思います.zip/.combineLatest
が、これはやり過ぎのようで、多くの追加コードを生成します - それが私がより良い方法を探している理由です.
angular - Angular2 のサービスで変数の変更をリッスンする
Anuglar2 サービスの変数の変更をリッスンする最良の方法は何ですか。そして、この変更により、コンポーネントはそれ自体を更新します。
events - Angular2 - Redux と単方向データ フローを使用すると、再レンダリング時に DOM イベントが失われる
タイトルの最適な表現方法がわかりませんでしたが、説明が明確になることを願っています。
状態管理に Redux を使用する Angular2 コンポーネントがあります。そのコンポーネントは*ngFor
、このようなボタンで小さな入力の配列をレンダリングするために使用します。「状態」はこんな感じです。
そして、テンプレートはそのようにレンダリングします...
入力がフォーカスされて編集されると、フォーカスが移動され、onBlur($event)
コールバックが呼び出され、redux アクション (つまり: "UPDATE_VALUE"
) が新しい値でディスパッチされます。
そして、レデューサーは値を更新します (Immutable.js を使用):
状態が更新されるため、コンポーネントは更新された値で再レンダリングされます。
入力の横にあるボタンがクリックonClick($event)
されると、別の redux アクション (つまり: "ADD_VALUE"
) をディスパッチするコールバックが起動され、状態が更新され、コンポーネントが新しい空白の入力とボタンで再レンダリングされます。
この問題は、入力がフォーカスされており (編集中)、ユーザーがボタンをクリックしたときに発生します。ユーザーはボタンをクリックするつもりでしたが、たまたまフィールドにフォーカスしていたため、期待どおりに動作しませんでした。イベントが最初に発生する(blur)
ため、入力 onBlur コールバックが発生し、redux アクションがディスパッチされ、状態が更新され、コンポーネントが再レンダリングされます。しかし、ボタン(click)
が失われるため、新しい入力は作成されません。
質問: クリック イベントを追跡し、再レンダリング後に 2 番目のアクションをトリガーする方法はありますか? または、何らかの形で還元アクションを連鎖させて、再レンダリングの前に順番に実行する方法はありますか?
サイドノート -以前にトリガーされた(click)
イベントを使用するように変更しようとしましたが、Angular (devMode)がチェック後にコンポーネントが変更されたと不平を言いました (変更検出サイクル中に状態が変更されました)。私はまだそれについて深く掘り下げていませんでした。クリックとぼかしをそのまま使用して解決策を見つけたいと思っています。(mousedown)
(blur)
@inputs
ありがとう!
angular - Angular 2 コンポーネントで OnChanges と DoCheck の両方を使用できますか?
ngOnChanges
コンポーネントでとの両方を使用したいシナリオがありますがngDoCheck
、角度のあるドキュメントで、一度に 1 つだけを使用する必要があることを覚えています。
この情報はもう見つけられないようですが、以前このセクションのどこかでこれを言ったと思います。
これらの両方を使用しても安全ですか、それとも大きな「ノーノー」を避けるためngOnChanges
に独自のバージョンの を実装する必要がありますか?DoCheck
angular - *ngFor 内での Angular 2 の変更検出が機能しないようです (RC5)
私の ng2 モジュール内では、別のモジュールによって関数が呼び出され、オブジェクトが作成され、それがテンプレートの *ngFor にバインドされた配列にプッシュされます。ドキュメントhttps://angular.io/docs/ts/latest/api/common/index/NgFor-directive.htmlによると、変更を自動的に検出する必要があります。配列をコンソールログに記録できますが、すべてがそこにありますが、セレクタータグは空のままです。テストとして静的配列を使用すると、機能します。ここと他のサイトの一見類似した質問とドキュメントの ChangeDetectorRef をすべて調べましたが、見つかったのは数か月前のもので、試してみるとエラーが発生しました。
これは、marker.component.html です。
そしてこれはmarker.component.tsです:
静的に書き込まれた「トークン」が表示され、期待どおりに機能しますが、新しく追加されたものはありません。