각도 6 관측 가능 항목에 항목 추가

각도 6 관측 가능 항목에 항목 추가

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

}

}

한다면this.contacts관측 가능한 객체 목록입니다(contacts: Observable<Items[]>그리고 당신은 그 목록에 약간의 변경을 원하며, 당신은 간단히 사용할 수 있습니다.tap:

import { tap } from 'rxjs/operators';

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

그러나 서버에 다른 요청을 하고 이러한 목록을 병합하려면 다음을 사용할 수 있습니다.merge:

import { merge } from 'rxjs';

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

갱신하다

자세한 내용은 설명을 참조하여 관찰할 수 있는 항목에 대해 아무것도 수행할 필요가 없습니다.필요한 것은 다음과 같습니다.

당신의contacts.service.ts:

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

연락처.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.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);
}

연락처.component.ts'에서:

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

관찰 가능한 항목으로 작업

---

사용자 서비스 중

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

이 추가 방법이 서비스 중인 주체를 호출할 때 값을 내보내고 병합 관찰 가능한 두 개의 입력을 가진 사람이 있으면 이를 관찰할 수 있으므로 자동으로 호출한 다음 파이프 맵에서 운영자가 삽입 작업을 수행하고 연락합니다.추가 기능을 사용하면 관찰 가능한 목록이 업데이트됩니다.

addContact() 메서드는 관찰 가능한 getContact()에 가입하는 방법입니다.

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


}

언급URL : https://stackoverflow.com/questions/53260269/angular-6-add-items-into-observable