データ検索待ち時間を処理する角度

Question

最初はオフに10年以上（元Java開発者）でコード化されていないので、ちょうど趣味として角度4に精通しているが、基本的な理解が不足している。私は観測可能なものでデータ検索の待ち時間を処理することを探しましたが、関連する結果は戻っていませんでした。ここの誰かが助けて説明できることを願っています。それは（あまりにも、インラインコメントを参照）、以下の活字体のコードを中心に展開：

RemoteDataService

export class RemoteDataService { 
private headers = new Headers({ 'Content-Type': 'application/json' }); 
constructor(private http: Http) { } 

public getData(url) { 
    return this.http.get(url) 
    .map(
    (response: Response) => { 
     const data = response.json(); 
     return data; 
    } 
) 
} 
} 

ArticleService

export class ArticleService implements OnInit { 
_articles: Article[]; 

constructor(private _remoteDataService: RemoteDataService) { 
    this.onGet(); 
    console.log(JSON.stringify(this._articles)) **//<- this._articles is null** 
    setTimeout(()=> console.log(JSON.stringify(this._articles + "////")), 3000) 
    } **//<- but if I wait 3 seconds this._articles is set to data elements** 

public onGet() { 
    this._remoteDataService.getData('./assets/articles.json') 
    .subscribe(
    (articles: any[]) => { 
    this._articles = articles, 
    console.log(this._articles) **//<- this_.articles is set** 
    }, 
    (error) => console.log(error)) 

    //console.log(this._articles) **//<- if I uncomment this_.articles is null, huh?** 
    } 
} 

出力：

article.service。 ts：34 "undefined ////

article.service.ts：46（20）[{...}、{...}、{...}、{...}、{...}、{...}、{... }、{...}、{...}、{...}、{...}、{...}、{...}、{...}、{...}、{...}、{...}、{...}]

article.service.ts：35 "[オブジェクトオブジェクト]、[オブジェクトオブジェクト]、[オブジェクトオブジェクト]、[オブジェクトオブジェクト]、[オブジェクトオブジェクト]、[オブジェクトオブジェクト]、[オブジェクトオブジェクト]、[オブジェクトオブジェクト] 、[オブジェクトオブジェクト]、[オブジェクトオブジェクト]、[オブジェクトオブジェクト]、[オブジェクトオブジェクト]、[オブジェクトオブジェクト]、[オブジェクトオブジェクト]、[オブジェクトオブジェクト]、[オブジェクトオブジェクト]、[オブジェクトオブジェクト]、[オブジェクトオブジェクト]、[オブジェクト>オブジェクト]、[オブジェクトオブジェクト] //// "

私の質問は：

1）なぜonGet()メソッドではthis._articlesがnullに設定されるのですか？

2）記事がまだ設定されていないため、サービスを呼び出すコンポーネントがクラッシュしているため、データの遅延はどのように処理されるのですか？

Answer 1

1）あなたはあなたのサービスに作っているコールは、コールが別のスレッドで行われたが、onGet()が実行し続けていることを意味する非同期を起こっています。 this._articlesは、コンソールにログインしたときにまだ設定されていません。

2）大変な質問です。答えは、あなたが達成しようとしていることに大きく依存しています。 1つは、setTimeout（）を使うのは悪いことです。データなしで作業できるように、コンポーネントを設計する必要があります。あなたのテンプレートが壊れている場合は、safe navigation operatorが便利かもしれません。あなたが詳細を提供すれば、私は喜んで助けてくれるでしょう。

Answer 2

私はそれを理解したと思います。 。 。誰も気にして申し訳ありません。

私は、これはこれは、あなたが角度サブスクリプションと観測についての詳細を読む必要が

Answer 3

を動作するようです私のコンポーネント

private _articleSubscription: Subscription; 

this._articleSubscription = this._articleService.articleHasChanged.subscribe({ 
    next: (articles) => { 
    console.log("Time to get the article"); 
    this._articleService.getArticleByID(this.id); 
    console.log(this.diagnostic) 
    } 
} 
) 

にこのコードを追加した私の記事サービス

articleHasChanged = new Subject<Article[]>(); 

でこれを置きます。これらは動作の仕方とは異なる働きをするためです。これはおそらくgood article for thatですが、検索する必要があります。私は、これはこれは理解することは非常に簡単ですofficial API documentation

だと思います。あなたのアプリでリクエストを行うたびに。アプリケーションは、リクエストが終了するまで待つ必要はありません。これはブラウザの仕組みと非常によく似ています。ブラウザーにURLを入力し、ブラウザーの読み込みが完了してからページを使用して再開して使用すると、ページが読み込まれている間に他の操作を実行します。 this.http.get(url)を使用すると、ブラウザは現在のアプリケーションスコープ外の要求を処理します。したがって、次のコードブロックは、ブラウザが要求を出して応答を待つ間、実行され続けます。したがって、他のコードが実行されると、要求はまだ完了していません。要求が非常に迅速に行われ、要求が完了するまでに数秒かかる場合があります。 を使用すると、要求が呼び出された直後に返されるobservableを返すことになります。まだ読み込まれているので、サーバーからの応答がないときです。

.subscribe(
    (articles: any[]) => { 
    this._articles = articles, 
    console.log(this._articles) **//<- this_.articles is set** 
    }, 
    (error) => console.log(error)) 

この部分はオブザーバブルに登録されています。リクエストが成功したかどうかによって、subscribe()内のコードがロードされるようになります。 public onGet() {}スコープ内のすべてのコードは、要求が読み込みが完了した場合にのみ実行されます今離れ.subscribe()からによって実行されます。

あなたが要求はそれほど有用ではないだろうsetTimeout()を使用してロードするためにかかる時間を知っていることはありません。だから、コンピュータは、要求のロードが完了しており、それはあなたが観測