Angular2：转换阵列观测 [英] Angular2: convert array to Observable

问题描述

我有一个通过HTTP服务获取数据的组件，问题是，我不希望我每次显示该组件的时间来打API后端。我想检查我的服务，如果数据在内存中，如果是，则返回一个可观察的与内存中的数组，如果没有，使HTTP请求。​​

我的组件

 进口{组件，OnInit中}从'angular2 /核心;
进口{}路由器从'angular2 /路由器;从./contact进口{}联系;
进口{}的ContactService从'./contact.service';@零件（{
  选择：联系人，
  templateUrl：应用程序/联系人/ contacts.component.html
}）
出口类ContactsComponent实现的OnInit {  联系方式：联系人[];
  的errorMessage：字符串;  构造函数（
    私人路由器：路由器，
    私人的ContactService：的ContactService）{}  ngOnInit（）{
    this.getContacts（）;
  }  getContacts（）{
    this.contactService.getContacts（）
                       。订阅（
                         联系人= GT; this.contacts =接触，
                         错误=＆GT; this.errorMessage =＆LT;＆任何GT;错误
                       ）;
  }
}
 

我的服务

 进口{}注射从'angular2 /核心;
进口{HTTP，响应，接头，RequestOptions}从'angular2 / HTTP';
从./contact进口{}联系;
从进口观测{}rxjs /可观察到的';@Injectable（）
出口类的ContactService {  私人联系人：数组＆LT;联系与GT; = NULL;  构造函数（私人HTTP：HTTP）{  }  getContacts（）{
    //首先检查是否接触== NULL
    //如果没有，返回观测（this.contacts）？ ＆LT;  - 如何？    返回this.http.get（URL）
                    .MAP（RES =＆GT;＆LT;联系[]＆GT; res.json（））
                    。做（联系人= GT; {
                      this.contacts =接触;
                      的console.log（联系人）;
                    }）//眼球导致控制台
                    .catch（this.handleError）;
  }
  私人的HandleError（错误：响应）{
    //在现实世界的应用程序，我们可以将服务器发送到一些偏远的日志基础设施
    //，而不是仅仅是登录到控制台
    console.error（错误）;
    返回Observable.throw（error.json（）错误||'服务器错误）;
  }
}
 

解决方案

您说得对。如果你已经在内存中的数据，可以使用<一个href=\"https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/of.md\"><$c$c>of观察到的（相当于<一个href=\"https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/return.md\"><$c$c>return/just在RxJS 4）。

getContacts（）{    如果（this.contacts！= NULL）
    {
        返回Observable.of（this.contacts）;
    }
    其他
    {
        返回this.http.get（URL）
            .MAP（RES =＆GT;＆LT;联系[]＆GT; res.json（））
            。做（联系人= GT; this.contacts =触点）
            .catch（this.handleError）;
    }
}


I have a component that gets the data from a service via http, the problem is that I don't want to hit the API backend every time I show this component. I want my service to check if the data is in memory, if it is, return an observable with the array in memory, and if not, make the http request.

My component

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

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

解决方案

You're right there. If you already have the data in memory, you can use of observable (equivalent of return/just in 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);
    }
}

这篇关于Angular2：转换阵列观测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！