web-dev-qa-db-ja.com

Angular http投稿でサービスを介してコンポーネントにデータを返す

SQLサーバーからサービスを介してコンポーネントにデータ（@@ identity）を返したい

Web APIは間違いなく呼び出され、データを送り返しています。

ただし、私はAngular 2/4（私はangular 1）に慣れていた）に慣れていないので、通常はreturnを実行します。サービス、および変数またはオブジェクトを呼び出し元に設定します。

現在これが私がしていることです

コンポーネント

this.trackerFormService.addSession();  // CURRENT

しかし、値は5のような単一のIDなので、TypeScriptで何かを作成して取得するべきではありませんか？

this.myId = this.trackerFormService.addSession();    // ???

その後サービス中

private _url = 'http://localhost:60696/api/tracker';

addSession() { 
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    this.http.post(this._url, JSON.stringify({}), options).catch(this.handleError).subscribe();

}

上記でサービスからIDを渡すために（addSession（）メソッドをコンポーネントに戻すには、returnを実行するべきではありませんか？

return this.http.post(this._url, JSON.stringify({}), options).catch(this.handleError).subscribe();

しかし、それは本当にうまくいくでしょうか？

Web API（.netコア）は次のようになります

return Created($"api/sessiontrackers/{sessionTracker.Id}", sessionTracker);
javascriptangulartypescriptobservableangular-services
4
user6321478

これは確かにWebAPIへのポストコールを行うのに役立ちます

https://dheerajsroy.wixsite.com/dheerajkumar/single-post/2017/09/07/How-to-make-Post-Call-in-Angular-2

あなたのサービスで

 return this.http.post(Url, JSON.stringify(data), requestOptions)
              .map((response: Response) => response.json())

コンポーネント内

this.service.addSession(this.data).subscribe(
      data => { console.log(data) // Data which is returned by call
      },
      error => { console.log(error); // Error if any
      },
      ()=> // Here call is completed. If you wish to do something 
      // after call is completed(since this is an asynchronous call), this is the right place to do. ex: call another function
    )
4
Dheeraj Kumar

.subscribeなしで、ObservableからaddSessionを返すことができます

addSession() { 
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.post(this._url, JSON.stringify({}), options).catch(this.handleError);
}

また、これは非同期呼び出しであるため、コンポーネント内のオブザーバブルにsubscribeを割り当て、呼び出しが終了したら、値をmyIdに割り当てます。

this.trackerFormService.addSession().subscribe(result => this.myId = result);
2
Suren Srapyan