Angular2：將數組轉換為 Observable

Question

我有一個通過 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');
    }
}

Answer 1

你就在那兒。 如果您已經在內存中擁有數據，您可以使用 observable（在 RxJS 4 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);
    }
}

Answer 2

import { of } from 'rxjs'; return of(this.contacts);

Answer 3

像我這樣的人想要它不同，這是從string[]到Observable<string> 。

這是一個涉及轉換的示例：

import { from } from 'rxjs/observable/from';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toArray';

const ids = ['x12', 'y81'];
let userUrls: string[];

from(ids) // Converting string[] into Observable<string>
  .map(id => 'http://localhost:8080/users/' + id)
  .toArray()
  .subscribe(urls => userUrls = urls);

希望它會幫助其他一些人。

Answer 4

在 angular7 中，只需放置of()就足夠了。 無論你在of()中放置什么，都將被更改為 observable。 在這里， this.contacts被轉換為 observable。

import { of } from 'rxjs';

getContacts() {
    if (this.contacts != null) {
        return of(this.contacts);
    }
}

Answer 5

這里的快速解決方案：

getSomething(): Observable < Object[] > {
    return new Observable(observable => {
        this.http.get('example.com').subscribe(results => {
            observable.next(results.json());
            observable.complete();
        });
    });
}

Answer 6

這可能會非常晚，但我一直在大量使用sessionStorage來處理我的一些工作。 如果您因為人們四處走動而失去狀態，您仍然擁有您的數據。

 getSubjects(): Observable < Subject[] > { let SubjectsString = sessionStorage.getItem("Subjects"); if (SubjectsString) { let subjects: Subject[] = JSON.parse(SubjectsString); console.log("GETTING DATA FROM SESSION STORAGE"); return Observable.of(subjects); } else { let url = `${this.apiHost}/api/subject`; return this.http.get(url) .map(res => { sessionStorage.setItem("Subjects", JSON.stringify(res.json())); return res.json(); }); } }

在這個例子中，我有一個 Subject 的類和一個 apiHost 的定義，但其余的都很簡單。 您調用該服務以獲得可觀察的。 您的組件不知道數據在哪里，也不在乎。 該服務檢查本地存儲，如果有，則將其轉換為可觀察對象並返回，如果沒有，它會去獲取它，然后將其保存到本地存儲，然后返回。

就我而言，我有一些包含數百頁的大型應用程序。 用戶可能會從一個不錯的新 Angular4 頁面跳到經典的 ASP 時代，然后多次返回。 將所有菜單項甚至搜索結果都保存在會話存儲中是一種救命稻草。

Answer 7

你也可以使用Observable.of(resultArray);

從import { Observable } from 'rxjs;' 包裹