Http 角度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
                       );
  }
}

从'angular2/core'导入{Component，OnInit}；
从'angular2/Router'导入{Router}；
从“/Contact”导入{Contact}；
从“/contact.service”导入{ContactService}；
@组成部分({
选择器：“联系人”，
templateUrl:'app/contacts/contacts.component.html'
})
导出类Contacts组件实现OnInit{
联系人：联系人[]；
错误消息：字符串；
建造师(
专用路由器：路由器，
专用contactService:contactService）{}
恩戈尼尼特（）{
这是getContacts（）；
}
getContacts（）{
this.contactService.getContacts（）
.订阅(
contacts=>this.contacts=contacts，
error=>this.errorMessage=错误
);
}
}

我的服务

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

从'angular2/core'导入{Injectable}；
从'angular2/Http'导入{Http，Response，Headers，RequestOptions}；
从“/Contact”导入{Contact}；
从“rxjs/Observable”导入{Observable}；
@可注射（）
导出类联系人服务{
私人联系人：Array=null；
构造函数（专用http:http）{
}
getContacts（）{
//如果contacts==null，请首先检查
//如果不是，则返回Observable（this.contacts）？res.json（）
.do（联系人=>{
这个。联系人=联系人；
控制台日志（联系人）；
})//控制台中的眼球结果
.接住（这个.把手错误）；
}
私有句柄错误（错误：响应）{
//在现实世界的应用程序中，我们可能会将服务器发送到某些远程日志记录基础设施
//而不仅仅是将其记录到控制台
控制台错误（error）；
返回Observable.throw（error.json（）.error | |'Server error'）；
}
}

你说得对。如果内存中已经有数据，可以使用observable（相当于RXJS4中的）

getContacts（）{
如果（this.contacts！=null）
{
可观察到的返回（本联系人）；
} 
其他的
{
返回此.http.get（url）
.map（res=>res.json（））
.do（contacts=>this.contacts=contacts）
.接住（这个.把手错误）；
}
}

这可能来得非常晚，但我一直在大量使用会话存储来处理我的一些工作。如果你失去了状态，因为人们到处乱跳，你仍然有你的数据

getSubjects（）：可观察{
让SubjectsString=sessionStorage.getItem（“主题”）
if（SubjectsString）{
let subjects:Subject[]=JSON.parse（SubjectsString）；
log（“从会话存储中获取数据”）
（受试者）的可观察回报率；
}否则{
让url=`${this.apiHost}/api/subject`；
返回此.http.get（url）
.map（res=>{
setItem（“Subjects”，JSON.stringify（res.JSON（））；
返回res.json（）；
})
}
}

此处的快速解决方案：

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

getSomething（）：可观察{
返回新的可观察项（可观察项=>{
this.http.get（'example.com'）.subscribe（结果=>{
next（results.json（））；
可观察的，完全的；
});
});
}

像我这样的一些人想要它的方式不同，从

字符串[]

到

可观察的

这是一个涉及转换的示例：

import{from}来自'rxjs/observable/from'；
导入'rxjs/add/operator/map'；
导入'rxjs/add/operator/toArray'；
常量ID=['x12'，'y81']；
让userurl:string[]；
from（ids）//将字符串[]转换为可观察的
.map（id=>'http://localhost:8080/users/“+id）
.toArray（）
.subscribe（URL=>userURL=URL）；

---

希望它能对其他人有所帮助。

在angular7中，只要把（）的

放进去就足够了。不管你放在里面什么
import { of } from 'rxjs';


return of(this.contacts);

of（）
将更改为可观察。这里，
this.contacts
被转换
可观察到

import { of } from 'rxjs'; 

getContacts() {

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

您还可以使用
Observable.of（resultArray）

从
import{Observable}从'rxjs；'
package
这可能是一个愚蠢的问题，但你不能缓存可观察对象本身并调用。next（）而不是缓存状态并在每次调用时重新创建可观察对象吗？好的，我会试试。虽然当我想通过特定的keyimport“rxjs/add/observate/of”迭代数组以返回单个联系人时，这不是最好的选择@埃里克·马丁内斯，谢谢你的回答。你是从哪里得到这个消息的。我从“rxjs”中导入了它，但是它不在可观察范围内。