각도2: 배열을 관측 가능으로 변환

각도2: 배열을 관측 가능으로 변환

http를 통해 서비스에서 데이터를 가져오는 구성요소가 있는데, 문제는 이 구성요소를 보여줄 때마다 API 백엔드를 치고 싶지 않다는 것입니다.나는 내 서비스가 데이터가 메모리에 있는지 확인하고, 데이터가 있다면 메모리에 있는 배열로 관측치를 반환하고, 그렇지 않다면 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');
    }
}

당신은 바로 거기에 있습니다.메모리에 데이터가 이미 있는 경우 관측 가능(RxJS 4에 해당)을 사용할 수 있습니다.

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);
    }
}

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

저와 같은 사람들은 그것을 다르게 원하는데, 그것은 바로 다음과 같습니다.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);

그것이 다른 사람들에게 도움이 되기를 바랍니다.

각도 7에서 그냥 두어도 충분합니다.of(). 당신이 무엇을 넣든지 간에of()가 관측 가능으로 변경됩니다.여기서,this.contacts가 관측 가능으로 변환됩니다.

import { of } from 'rxjs';

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

빠른 해결 방법:

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

사용할 수도 있습니다.Observable.of(resultArray);

로부터import { Observable } from 'rxjs;'꾸러미

너무 늦었을 수도 있지만, 제가 사용해왔던 것은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 시대로 이동했다가 여러 번 반복할 수 있습니다.모든 메뉴 항목과 검색 결과를 세션 저장소에 저장하는 것이 생명을 구했습니다.

언급URL : https://stackoverflow.com/questions/35527500/angular2-convert-array-to-observable