メソッドを呼び出す前に、Firebaseからのデータで配列が初期化されるのを待っています

beh1

Firebaseへのアクセスを提供するAngularサービスがあります。Firebaseからデータを取得し、その情報を配列に入れて、初期化された配列でいくつかの関数を呼び出すコンポーネントがあります。私はAngularを初めて使用するため、この動作をどのように実装すべきか正確にはわかりません。subscribe()は非同期であることがわかっているので、これに敏感になるように関数を実装する必要があります。

graph.component.ts

import { Component, OnInit, OnChanges, ViewChild, ElementRef, Input, ViewEncapsulation } from '@angular/core';
import { EscortService } from '../services/escort/escort.service';
import { Escort } from '../data/escort.data';
import * as d3 from 'd3';

@Component({
  selector: 'app-graph',
  templateUrl: './graph.component.html',
  styleUrls: ['./graph.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class GraphComponent implements OnInit {

       escortList : Escort[] = [];

        constructor(private escortService : EscortService, private element: ElementRef){
        } 

        ngOnInit(){
            this.getData();
            this.generateBarChart();
        }

        getData(){
            var esc = this.escortService.getData();
            esc.snapshotChanges().subscribe(item => {
              this.escortList = [];
              item.forEach(element => {
                    var y = element.payload.toJSON();
                    y["$key"] = element.key;
                    var currentEscort = (y as Escort);
                    if(currentEscort.status == 'Completed'){
                        console.log("escort-list -> ngOnInit() : currentEscort.status = " + currentEscort.status);
                        this.escortList.push(currentEscort);
                     }
              });
           });
        }
ジャンフィリップデブラトン

escortListはObservableである必要があります。

    private const escortList = new ReplaySubject<Escort[]>();
    get escortList() : Observable<Escort[]> {
        return this.escortList.asObservable();    // this prevents caller from being able to call method 'next' on the subject
    }

    constructor(private escortService : EscortService, private element: ElementRef){
    } 

    ngOnInit(){
        this.getData();
        this.generateBarChart();
    }

    getData(){
        var esc = this.escortService.getData();
        esc.snapshotChanges().subscribe(item => {
          const newEscortList = [];
          item.forEach(element => {
                var y = element.payload.toJSON();
                y["$key"] = element.key;
                var currentEscort = (y as Escort);
                if(currentEscort.status == 'Completed'){
                    console.log("escort-list -> ngOnInit() : currentEscort.status = " + currentEscort.status);
                    newEscortList.push(currentEscort);
                 }
          });
          this.escortList.next(newEscortList);
       });
    }

次に、コンポーネントで、Observableにサブスクライブして更新を取得する必要があります。退会することを忘れないでください。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ビルドメソッドが呼び出される前に、非同期メソッドの完了を待ってデータをロードする方法は?

分類Dev

jQuery UIから「UncaughtError:初期化前にダイアログでメソッドを呼び出せません。メソッド 'close'を呼び出そうとしました」というメッセージが表示されるのはなぜですか。

分類Dev

別のメソッドが呼び出されるのを待ってから、結果を続行します

分類Dev

メソッドチェーンを使用して、関数がコースを実行するのを待ってから再度呼び出す前に、同じJavaScript関数を繰り返し呼び出すにはどうすればよいですか?

分類Dev

初期化されていない可能性のある配列をパラメーターとして使用するメソッドを呼び出す方法は?

分類Dev

エラー:Firestoreはすでに初期化されています。settings()を呼び出すことができるのは、Firestoreオブジェクトの他のメソッドを呼び出す前に1回だけです。

分類Dev

次に、setStateが終了するのを待ってから、次のメソッドを呼び出しますか?

分類Dev

配列が入力されるのを待ってから、Angularで呼び出されます

分類Dev

このメソッドを呼び出してこの配列を初期化するにはどうすればよいですか?

分類Dev

キャッチされていないエラー:初期化前にボタンのメソッドを呼び出すことはできません。メソッド 'loading'を呼び出そうとしました

分類Dev

テストメソッドを呼び出す前に、テストデータを静的に初期化するにはどうすればよいですか?

分類Dev

C#では、main()メソッドが呼び出される前に、すべての静的変数が初期化されますか?

分類Dev

構造体の配列の初期化を使用してコンストラクターを既に作成している場合、メソッドを呼び出すにはどうすればよいですか?

分類Dev

オブジェクトが適切に初期化されていることを確認できるのはいつですか。たとえば、init()が他のメソッドの前に呼び出された場合などです。

分類Dev

個別のメソッド呼び出しによって配列データが失われるのを防ぐにはどうすればよいですか?

分類Dev

3つのデータメンバーのそれぞれに対してsetメソッドを呼び出して、setメソッドによって設定された値を表示するにはどうすればよいですか?

分類Dev

スレッドが同期ブロックの前にモニターが解放されるのを待っている場合、またはwait()を呼び出す場合に違いはありますか

分類Dev

基本クラスからメソッドを呼び出すときに、親クラスで値がまだ初期化されていません

分類Dev

オブジェクトは、そのメンバー関数を呼び出す前に初期化されることが保証されていますか?

分類Dev

クラスは、switchブロックでインスタンス化されているにもかかわらず、インターフェイスメソッドのみを呼び出すことができます

分類Dev

すべてのSpringコンテキストが初期化された後にBeanでメソッドを呼び出す方法はありますか

分類Dev

ajax呼び出しの実行後にデータが追加されたら、メソッドを呼び出す

分類Dev

キャッチされないエラー:初期化の前にプログレスバーのメソッドを呼び出すことはできません。メソッド 'value'を呼び出そうとしました

分類Dev

キャッチされないエラー:初期化の前にドラッグ可能なメソッドを呼び出すことはできません。メソッド 'enable'を呼び出そうとしました

分類Dev

迅速。保存されているすべてのプロパティが初期化される前のメソッド呼び出しでの「self」の使用

分類Dev

ReactRedux-次のアクションがディスパッチされる前に非同期API呼び出しが終了するのを待っています

分類Dev

親クラスの関数がclassmethodまたはインスタンスメソッドによって子クラスから呼び出されていることをどのように知ることができますか?

分類Dev

メンバーが定義されているのと同じモデル内の配列を介してメソッドを呼び出す

分類Dev

mockitoを使用して配列要素をスパイすると、メソッドが呼び出されたときに必要なのに呼び出されない

Related 関連記事

  1. 1

    ビルドメソッドが呼び出される前に、非同期メソッドの完了を待ってデータをロードする方法は?

  2. 2

    jQuery UIから「UncaughtError:初期化前にダイアログでメソッドを呼び出せません。メソッド 'close'を呼び出そうとしました」というメッセージが表示されるのはなぜですか。

  3. 3

    別のメソッドが呼び出されるのを待ってから、結果を続行します

  4. 4

    メソッドチェーンを使用して、関数がコースを実行するのを待ってから再度呼び出す前に、同じJavaScript関数を繰り返し呼び出すにはどうすればよいですか?

  5. 5

    初期化されていない可能性のある配列をパラメーターとして使用するメソッドを呼び出す方法は?

  6. 6

    エラー:Firestoreはすでに初期化されています。settings()を呼び出すことができるのは、Firestoreオブジェクトの他のメソッドを呼び出す前に1回だけです。

  7. 7

    次に、setStateが終了するのを待ってから、次のメソッドを呼び出しますか?

  8. 8

    配列が入力されるのを待ってから、Angularで呼び出されます

  9. 9

    このメソッドを呼び出してこの配列を初期化するにはどうすればよいですか?

  10. 10

    キャッチされていないエラー:初期化前にボタンのメソッドを呼び出すことはできません。メソッド 'loading'を呼び出そうとしました

  11. 11

    テストメソッドを呼び出す前に、テストデータを静的に初期化するにはどうすればよいですか?

  12. 12

    C#では、main()メソッドが呼び出される前に、すべての静的変数が初期化されますか?

  13. 13

    構造体の配列の初期化を使用してコンストラクターを既に作成している場合、メソッドを呼び出すにはどうすればよいですか?

  14. 14

    オブジェクトが適切に初期化されていることを確認できるのはいつですか。たとえば、init()が他のメソッドの前に呼び出された場合などです。

  15. 15

    個別のメソッド呼び出しによって配列データが失われるのを防ぐにはどうすればよいですか?

  16. 16

    3つのデータメンバーのそれぞれに対してsetメソッドを呼び出して、setメソッドによって設定された値を表示するにはどうすればよいですか?

  17. 17

    スレッドが同期ブロックの前にモニターが解放されるのを待っている場合、またはwait()を呼び出す場合に違いはありますか

  18. 18

    基本クラスからメソッドを呼び出すときに、親クラスで値がまだ初期化されていません

  19. 19

    オブジェクトは、そのメンバー関数を呼び出す前に初期化されることが保証されていますか?

  20. 20

    クラスは、switchブロックでインスタンス化されているにもかかわらず、インターフェイスメソッドのみを呼び出すことができます

  21. 21

    すべてのSpringコンテキストが初期化された後にBeanでメソッドを呼び出す方法はありますか

  22. 22

    ajax呼び出しの実行後にデータが追加されたら、メソッドを呼び出す

  23. 23

    キャッチされないエラー:初期化の前にプログレスバーのメソッドを呼び出すことはできません。メソッド 'value'を呼び出そうとしました

  24. 24

    キャッチされないエラー:初期化の前にドラッグ可能なメソッドを呼び出すことはできません。メソッド 'enable'を呼び出そうとしました

  25. 25

    迅速。保存されているすべてのプロパティが初期化される前のメソッド呼び出しでの「self」の使用

  26. 26

    ReactRedux-次のアクションがディスパッチされる前に非同期API呼び出しが終了するのを待っています

  27. 27

    親クラスの関数がclassmethodまたはインスタンスメソッドによって子クラスから呼び出されていることをどのように知ることができますか?

  28. 28

    メンバーが定義されているのと同じモデル内の配列を介してメソッドを呼び出す

  29. 29

    mockitoを使用して配列要素をスパイすると、メソッドが呼び出されたときに必要なのに呼び出されない

ホットタグ

アーカイブ