typescript - Angular 6 legge til elementer i Observable

Jeg er ny på Angular 6 og har problemer med hvordan jeg kan legge til objekter i en observable i en tjeneste.

jeg har dette observable

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

og jeg trenger å legge til et element i den observerbare gjennom en annen funksjon

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

Her er min fullstendige servicekode

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

}

}

Svar #1

Hvis this.contacts er en Observable av en liste med objekter (contacts: Observable<Items[]>) og du ønsker å gjøre noen endringer i den listen, kan du enkelt bruke tap:

import { tap } from 'rxjs/operators';

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

Men hvis du vil sende en ny forespørsel til serveren og slå sammen disse listene, kan du bruke merge:

import { merge } from 'rxjs';

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

Oppdatering

Basert på kommentaren din om flere detaljer, trenger du ikke gjøre noe med observables. Det du trenger er noe som dette:

I din contacts.service.ts:

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

I din contacts.component.ts:

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

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

Men hvis du vil ha kontaktlisten din som en Observable, bør du bruke en Subject.

I din contacts.service.ts:

contactsChange$ = new Subject<any>();
private contactsList = [];

getContacts(){
  return this.http.get('https://jsonplaceholder.typicode.com/users').pipe(tap(data => {
    this.contactsList = data;
    this.contactsChange$.next(this.contactsList);
  }));
}

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

I din contacts.component.ts:

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

Svar #2

Arbeide med Observable

Til Din Tjeneste

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

Din kontaktskomponentklasse

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

Når denne add-metoden kaller subject i tjenesten, vil den sende ut verdien, og merge observable har to input-observables; hvis noen av dem sender ut en verdi, vil dette bli kalt automatisk, og deretter vil map-operatoren i pipe gjøre innsettingsjobben, og contactWithAdd-observable vil ha oppdatert liste.

Relaterte artikler