更新

Question

我是Angular 6的新手，我在如何将对象添加到服务的可观察对象方面遇到麻烦。

我有这个可观察的

 getContacts(){
  return this.contact = 
  this.http.get('https://jsonplaceholder.typicode.com/users');
 }

并且我需要通过另一个函数在该可观察项中添加一个项

addContact(item){
 //observable insertion goes here.
}

这是我的完整服务代码

export class ContactService {

contact;
details;

constructor(private http: HttpClient) {}

getContacts(){
 return this.contact = 
 this.http.get('https://jsonplaceholder.typicode.com/users');
}

addContact(contactName: string, contactPhone: string){

}

}

Answer 1

如果this.contacts是对象列表（contacts: Observable<Items[]>）的可观察对象，并且您想要对该列表进行一些更改，则可以像这样简单地使用map：

import { map } from 'rxjs/operators';

this.contacts.pipe(map(usersList => {
  usersList.push(newItem);
  return usersList;
}));

但是，如果您要向服务器发出另一个请求并合并此列表，则可以像这样使用forkJoin：

import { forkJoin } from 'rxjs';

forkJoin(
  this.contacts,
  this.http.get('https://jsonplaceholder.typicode.com/other_users');
).pipe(
  map(data => {
    const currentResult = data[0];
    const pastResult = data[1];
    // ...
  }
));

更新

根据您的评论以获取更多详细信息，您无需对可观察对象做任何事情。您需要的是这样的东西：

在您的contacts.service.ts中：

getContacts(){
  return this.contact = this.http.get('https://jsonplaceholder.typicode.com/users');
}

在您的contact.component.ts中：

contacts: any[] = [];
ngOnInit() {
  this.contactsService.getContacts.subscribe(data => {this.contacts = data});
}

addContact(item) {
  this.contacts.push(item);
}

但是，如果您确实希望将联系人列表作为可观察对象，则应使用Subject。

在您的contacts.service.ts中：

$contactsChange = new Subject<any>();
private contactsList = [];
getContacts(){
  return this.contact = this.http.get('https://jsonplaceholder.typicode.com/users').pipe(map(data => {
    this.contactsList = data;
    this.$contactsChange.next(this.contactsList);
  }));
}

addContact(item) {
  this.contactsList.push(item);
  this.$contactsChange.next(this.contactsList);
}

在您的contact.component.ts中：

contacts: any[] = [];
ngOnInit() {
  this.contactsService.getContacts.subscribe(data => {this.contacts = data});
  this.contactsService.$contactsChange.subscribe(data => {this.contacts = data});
}

Answer 2

addContact（）方法是您订阅可观察的getContacts（）的地方：

getContacts(): Observable<any> {   
    return this.contact = 
    this.http.get('https://jsonplaceholder.typicode.com/users');
}

订阅时是触发呼叫的时间：

addContact(){
    let cont: Observable<contactModel>;
    cont = this.getContacts();
    prueba.finally(() => {
       console.log('Finally callback')
    })
    cont.subscribe(res => {
        console.log('at the time of subscription is when the call is triggered')
        let resp: contactModel[];
        resp = res.json() as contactModel[];  
    });


}

Answer 3

使用可观察的

为您服务

private contactInsertedSubject = new Subject<Contact>();
contactInsertedActions$ = this.contactInsertedSubject.asObservable();

 public contacts$ = this.http.get<Contact[]>(this.contactsUrl)
            .pipe(
              // tap(data => console.log('Contacts: ', JSON.stringify(data))),
              catchError(this.handleError)
            );
public contactsWithAdd$ = merge(this.contacts$, this.contactInsertedActions$)
                        .pipe(
                          scan((acc: Product[], value: Product) => [...acc, value])
                        );
addContact(newContact?: Contact) {
   this.contactInsertedSubject.next(newContact);
}

您的联系人组件类

contacts$ = this.contactService.contactsWithAdd$;
onAdd(): void {
   this.contactService.addProduct();
}

当此add方法将调用服务中的主题时，将发出该值，而merge observable具有两个可观察到的输入（如果有一个将发出值），因此它将自动调用，然后在管道图中，操作员将执行插入工作，contactWithAdd observable将已更新列表。

Angular 6将项目添加到Observable

3 个答案:

更新