Angular2:配列をObservableに変換する
2023-09-21 14:26:48
質問
私はhttp経由でサービスからデータを取得するコンポーネントを持っています。問題は、私がこのコンポーネントを表示するたびにAPIバックエンドをヒットしたくないということです。私は私のサービスがデータがメモリ内にあるかどうかをチェックし、それがある場合は、メモリ内の配列を持つobservableを返し、そうでない場合はhttpリクエストを行うことを望みます。
私のコンポーネント
import {Component, OnInit } from 'angular2/core';
import {Router} from 'angular2/router';
import {Contact} from './contact';
import {ContactService} from './contact.service';
@Component({
selector: 'contacts',
templateUrl: 'app/contacts/contacts.component.html'
})
export class ContactsComponent implements OnInit {
contacts: Contact[];
errorMessage: string;
constructor(
private router: Router,
private contactService: ContactService) { }
ngOnInit() {
this.getContacts();
}
getContacts() {
this.contactService.getContacts()
.subscribe(
contacts => this.contacts = contacts,
error => this.errorMessage = <any>error
);
}
}
私のサービス
import {Injectable} from 'angular2/core';
import {Http, Response, Headers, RequestOptions} from 'angular2/http';
import {Contact} from './contact';
import {Observable} from 'rxjs/Observable';
@Injectable()
export class ContactService {
private contacts: Array<Contact> = null;
constructor (private http: Http) {
}
getContacts() {
// Check first if contacts == null
// if not, return Observable(this.contacts)? <-- How to?
return this.http.get(url)
.map(res => <Contact[]> res.json())
.do(contacts => {
this.contacts = contacts;
console.log(contacts);
}) // eyeball results in the console
.catch(this.handleError);
}
private handleError (error: Response) {
// in a real world app, we may send the server to some remote logging infrastructure
// instead of just logging it to the console
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
}
どのように解決するのですか?
そこで正解です。すでにメモリ上にデータがある場合は
of
観測可能(に相当する
return/just
に相当)。
getContacts() {
if(this.contacts != null)
{
return Observable.of(this.contacts);
}
else
{
return this.http.get(url)
.map(res => <Contact[]> res.json())
.do(contacts => this.contacts = contacts)
.catch(this.handleError);
}
}
関連
-
[解決済み] BehaviorSubjectとObservableの違い?
-
[解決済み] サブドメインとドメイン間でCookieを共有する
-
[解決済み】PromiseをObservableに変換する。
-
[解決済み】BASIC認証でWebサイトからユーザーをログアウトさせる方法は?
-
[解決済み】AngularでHTTPリクエストにURL引数(クエリ文字列)を渡すには?
-
[解決済み】無効なデータに対するRESTレスポンスコード
-
[解決済み】Node.jsのほとんどのポートでリスニングするとEACCESエラーが発生する。
-
[解決済み】エンティティボディを持たないHTTP POSTを実行することはバッドプラクティスとみなされますか?
-
[解決済み] Angular2 http.get()、map()、subscribe()とobservableパターン - 基本的な理解
-
[解決済み] HTTPリダイレクトコードの違い
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 要求されたURLの長さが、このサーバーの容量制限を超えていませんか?
-
[解決済み] IISファイルのダウンロードがハングアップ/タイムアウトする - sc-win32-status = 64
-
[解決済み] 404ヘッダー - HTTP 1.0か1.1か?
-
[解決済み] Cache-Control: max-age=0とno-cacheの違いは何ですか?
-
[解決済み] サーバーの1つのポート(例えば80)に複数のクライアントが同時に接続するにはどうすればよいですか?[重複しています]。
-
[解決済み] HTTPリダイレクト:301(永久)と302(一時)の比較
-
[解決済み] HTTPヘッダーの最大値?
-
[解決済み】http:// のリンクを全て // に変更することは可能ですか?
-
[解決済み】CURL コマンドライン URL パラメータ
-
[解決済み] HTTPのPOSTメソッドをキャッシュすることは可能ですか?