質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

受付中

Angularで非同期処理によって取得した値が格納されるのを待ってから、後続の処理を実行したい

rakiiiii
rakiiiii

総合スコア1

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

2回答

0評価

0クリップ

1888閲覧

投稿2021/01/10 13:50

###前提
AngularでWebアプリを開発している中での質問です。(超初心者です。)

test.component.tsではAngularのHttpClientを利用して
外部ネットワークに格納されているpageSize配列の0番目を取得し、
TestService側で宣言した"res"に格納しています。(TestService.tsのparamsGetPageSize)

その後、test.component.tsで取得したpageSize配列の0番目が格納された"res"を
TestService.tsのparamsGet関数で利用します。

###意図
TestService.tsのコードを見ていただければ分かる通り、
paramsGetPageSizeとParamsGetは
postParam = postParam.set('pageSize', ***);の***部分が固定値か、変数か以外に違いはありません。
pageSizeのような環境変数は外部に置いておき、それを読み込むようにしたいという意図があり、
pageSizeを読み込むための関数は固定値(仕方なし)、それ以外でparamsGet関数を利用する場合は、
取得した変数を用いる、という処理にしています。

このparamsGet関数は様々な場面で利用されます。

###質問
非同期なのが原因かと思いますが、test.component.tsで取得したpageSizeがresに格納される前に
TestService.tsのparamsGetが実行されてしまうため、resがundefinedのまま処理が進んでしまいます。

paramsGetが実行されるとき、resがundefinedの場合は値が格納されるのを待って処理を開始する、という方法があればご教授いただけないでしょうか。

よろしくお願いいたします。

###urlEncoder.ts

TypeScript

import { HttpParameterCodec } from '@angular/common/http'; export class UrlEncoder implements HttpParameterCodec { encodeKey(key: string): string { return encodeURIComponent(key); } }

###TestService.ts

TypeScript

import { HttpClient, HttpParams } from '@angular/common/http'; import { UrlEncoder } from 'urlEncoder.tsのパス'; export class TestService{ // test.component.tsから取得できるように宣言 public res = ""; constructor(private http: HttpClient) { } private setRequestParams(): HttpParams{ let httpParams: HttpParams = new HttpParams({ encoder: new CustomURLEncoder() }); httpParams = httpParams.set('hoge', '1'); //http://-----&hoge=1 になります。 } paramsGetPageSize(path: string, postParams: any = {}): Observable<any> { let postParam: HttpParams = this.setRequestParams(); // 固定値を使用 postParam = postParam.set('pageSize', '100'); return this.http.get(path, { params: postParam }); } paramsGet(path: string, postParams: any = {}): Observable<any> { let postParam: HttpParams = this.setRequestParams(); // test.component.tsで取得したthis.resを利用 postParam = postParam.set('pageSize', this.res); return this.http.get(path, { params: postParam }); } };

###test.component.ts

TypeScript

import TestService from {'Service.tsのパス'}; @component{ } export class TestComponent implements OnInit{ constructor( private test: TestService, ) ngOnInit(){ this.test.paramsGet('http://------').subscribe(res => { this.response = res.pageSize[0] //外部インターネット上のpageSize配列の0番目を取得 // サービスのプロパティに代入 this.test.res = this.response; } ); this.test.paramsGet('*******').subscribe( 処理 ); } }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。