問題タブ [angular2-docheck]
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.
angular - 大きな遅延を引き起こすことなく、オブジェクトの配列の変更を監視するにはどうすればよいですか?
Angular 1 にあった$watch
機能が Angular 2 には欠けていると感じています。
OnChanges
をDoCheck
置き換えることになっ$watch
ていますが、どちらも使用して目的の結果を得ることができませんでした。OnChanges
オブジェクトをリッスンできないため、このシナリオでは役に立ちDoCheck
ません。ジョブを実行している間、変更が発生するとすぐにバナナになるように見えるため、大きな遅延が発生します。
ここでは、一連のチェックボックスを持つコンポーネントを用意しています。各チェックボックスの切り替えにより、デフォルトの機能ではなく、値が配列に追加されますtrue/false
。
このコンポーネントで監視する必要があるisDisabled
のは、チェックボックスの状態です。そのため、状態が変化するたびに、のisChecked
状態を更新する必要がありcheckbox
ます。
私が言ったように、それは機能しますが、チェックボックスが5つしかないにもかかわらず、チェックボックスの切り替えごとに2〜3秒の遅延があります. チェックボックスを切り替えるたびにループを実行するのではなく、isDisabled
チェックボックスの状態が変化した場合にのみループを実行することをお勧めします。
編集:Observable
ここで仕事をすることができると言われましたが、このようなオブジェクトの配列に適用されている例は見つかりません。next()
また、送信される配列への外部の変更をリッスンする必要があるため、メソッドを手動で呼び出さずにトリガーする必要もあります。
EDIT 2:ラグを表示しないplunkrを作成しました. ただし、plunkr は、関数console.log(true)
内にa を配置し、何度も実行されるため、何か問題があるように見えることを明確に示しています。ngDoCheck()
これは意図したものではありません。もしそうなら、それは本当に奇妙です。
plunkr はこちら: https://plnkr.co/edit/dJVnqbrredDyWTXNDzDK?p=preview
これどうやってするの?
typescript - Angular2 アンフック ライフサイクル (ngDoCheck)?
2 つの API 呼び出しからの 2 つの応答を 1 つに結合しています。2 つの応答が完了したら、結合機能をトリガーする必要があります。
私は次のように ngDoCheck() でこれを行うことができました:
ご覧のとおり、応答があるかどうかを確認し、「this.peopleShown」ブール値を確認します。コンストラクターで、これを「false」に設定しました。これを行う理由は、小さなことが変更されるたびに関数を実行したくないためです (たとえば、ユーザーがサイトと対話するとき)。
私のソリューションでは、 ngDoCheck() は一度正常に実行された後は影響がないため、希望どおりに機能します。私の唯一の懸念は、ライフサイクルフックがまだフックされていることです(イベントリスナーのように、リッスンし続けますが、何もしません)。パフォーマンスに関しては、私が思う最善の解決策ではありませんか?
私の質問
ngDoCheck() を何らかの方法でフック解除することは可能ですか?
ngStopCheck()、または何か..
angular - データソースが変更されたときにAngular 2子コンポーネントが更新されない
渡した構成に基づいてテーブルを生成するテーブル コンポーネントを作成しました。
基本的に、コンポーネントは列とデータソース オブジェクトを含む構成を受け取り、列をデータソースのプロパティにマップします。
私の問題は、ある時点でテーブルのデータソースの 1 つに変更を加えることです。たとえば、最初に配列を空にします...
次に、新しいデータをデータソースにプッシュします...
私の問題は、これを行うと、テーブルがデータソースの新しいデータで更新されないことです。
コンポーネントで ngDoCheck 関数を使用しましたが、データソースを変更すると実際にトリガーされますが、他には何も起こりません。
ここにすべての相対コードとマークアップがあります...
ip-datatable コンポーネント
ip-datatable コンポーネントのテンプレート html
ip-datatable を利用するコンポーネント
ip-datatable の HTML 使用法
angular - 関数を属性値として使用するngDoCheck VS - パフォーマンスの違い
プロパティがこのコンポーネントの制御下にないサービスに依存する href 値を持つ Web ページにアンカー タグがあります。サービスの詳細は非同期に入力されます。
サービスの詳細を取得して href 値を作成するために、2 つの方法を考えました。 私の質問は - パフォーマンスの点でどちらが優れていますか? より良いオプションは何ですか?
関数を href 属性として使用する
これにより、関数が継続的に呼び出されます。
ngDoCheck の使用
ここまで読んでくれてありがとう。任意のガイダンスをいただければ幸いです