webentwicklung-frage-antwort-db.com.de

Angular2: Array in Observable umwandeln

Ich habe eine Komponente, die die Daten von einem Dienst über http abruft. Das Problem ist, dass ich nicht jedes Mal das API-Backend aufrufen möchte, wenn ich diese Komponente zeige. Ich möchte, dass mein Dienst überprüft, ob sich die Daten im Speicher befinden. Wenn dies der Fall ist, geben Sie ein beobachtbares Array mit dem Array im Speicher zurück. Wenn nicht, stellen Sie die http-Anforderung.

Meine Komponente

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

Mein service

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');
  }
}
42
Mathius17

Du bist genau da. Wenn Sie die Daten bereits im Speicher haben, können Sie of observable (Entsprechung von return/just in RxJS 4) verwenden.

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);
    }
}
62
Eric Martinez

Einige Leute wie ich wollen es anders, nämlich von string[] in Observable<string>

Dies ist ein Beispiel, das die Konvertierung beinhaltet:

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

Hoffentlich hilft es einigen anderen.

6
sancho21
import { of } from 'rxjs';


return of(this.contacts);
5
Mo D Genesis

Sie können auch Observable.of(resultArray); verwenden.

von dem import { Observable } from 'rxjs;' Paket

0
Ali

Dies könnte extrem spät sein, aber ich habe sessionStorage ziemlich stark benutzt, um einige meiner Arbeiten zu erledigen. Wenn Sie den Status verlieren, weil die Leute herumspringen, haben Sie immer noch Ihre Daten.

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

       
  }

In diesem Beispiel habe ich eine Klasse für Subject und eine Definition für apiHost, aber der Rest ist ziemlich einfach. Sie rufen den Dienst für ein Observable an. Ihre Komponente hat keine Ahnung, wo sich die Daten befinden, und es ist ihnen egal. Der Dienst prüft den lokalen Speicher und konvertiert ihn, falls vorhanden, in ein Observable und gibt ihn zurück. Wenn nicht, wird er abgerufen, dann im lokalen Speicher gespeichert und dann zurückgegeben.

In meinem Fall habe ich einige große Anwendungen mit Hunderten von Seiten. Benutzer könnten von einer Nice-neuen Angular4-Seite zu einem klassischen ASP -Alter und wieder zurückkehren. Alle Menüpunkte und sogar Suchergebnisse in Sessionstorage zu speichern, war ein Lebensretter.

0
Daniel Morris

Schnelle Lösung hier:

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

In angle7 reicht es aus, einfach die of() einzusetzen. Was auch immer Sie hineinlegen. of() wird in beobachtbar geändert. Hier wird this.contacts konvertiert zu beobachten.

import { of } from 'rxjs'; 

getContacts() {

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