Angular Observable

Question

Wie ändere ich den Wert in der Observable, die im Service nur die Methode über die Methode getUserInfo() verwendet?

@Injectable() 
export class UserInfoService { 

    public User: UserInfo = { 
     firstName: "O", 
     lastName: "K", 
     email: "ol@op.com", 
     country: "uk", 
     avatarUrl: null, 
     receiveNotifications: true 
    } 
    private Obser: Observable<UserInfo> = new Observable(observer => { 
     observer.next(this.User); 

    }); 
    getUserInfo(): Observable<UserInfo> { 
     return this.Obser; 
    } 
} 

Verwendung Service:

openDialog() { 
    let subscription = this.UserService.getUserInfo().subscribe(data =>(data=this.data)); 
    //What should I write here to change the value inside the observable? Please write if it is not difficult 
} 

Answer 1

Sie können bereits ausgegebene Daten nicht ändern. Sie können Daten erneut ausgeben.

Ich glaube, Sie so etwas wie dieses brauchen (ich nicht, dass nicht getestet, nur eine Idee):

import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 

@Injectable() 
export class MyService { 
    userData$: Observable <any> ; 

    constructor() { 
     this.userData$ = new BehaviorSubject(); 
    } 

    getUserInfoObservable() { 
     return this.userData.asObservable(); 
    } 

    updateUserInfo(newData) { 
     this.userData.next(newData); 
    } 
} 

Hier ist, wie Sie diese verwenden können:

@Component(...) 
class MyComponent { 
    myData: any; 
    constructor(private myService: MyService) { 
     myService.getUserInfoObservable().subscribe((newData) => this.myData = newData; 
    } 
} 

Wenn Sie wollen Daten aktualisieren, die Sie verwenden werden myService.updateUserInfo(newData).

Sie benötigen BehaviourSubject, weil Sie natürlich sofort aktuelle Benutzerdaten erhalten möchten. Was ist, wenn Ihre Komponente lazy loaded ist? Sie möchten aktuelle Daten und alle neuen Daten darin erhalten.

Sie können auch den Anfangswert von BehaviorSubject von new BehaviorSubject(null) festlegen. Null ist der Anfangswert dort.

BehaviorSubject ist Teil der schönen Rxjs Lib. Vollständige Dokumente sind verfügbar, z. B. here.

Answer 2

Einmal mit next() emittiert wird, kann der Wert nicht verändert werden. Gemäß dem Konzept der reaktiven Programmierung ist es besser, next() erneut mit dem geänderten Wert aufzurufen.

Answer 3

Die Observable, wie der Name schon sagt, ist ein Objekt, das für das Ereignis neuer Daten "beobachtet" werden kann, oder mit anderen Worten "subscribe" für das Ereignis neuer Daten. Was die Daten aussenden, ist nicht das Observable, aber es ist das observer, das für neue Daten beobachtet und es unter Verwendung der next Funktion ausstrahlt.

Observable - ein Objekt zum Abonnieren, um neue Daten zu erhalten. Observer - ein Objekt, um neue Daten zu veröffentlichen.

let observable: Observable<string> = new Observable(observer => { 
    observer.next('Hello'); // the observer emit the data 
}); 

observable.subscribe((data) => { // You subscribe to the observable for new data 
    console.log(data); // Print 'Hello' 
}); 

Wenn Sie neue Daten an alle Teilnehmer emittieren können, die zu dieser beobachtbaren Sie seine Beobachter verwenden müssen abonniert:

let observer; 
let observable: Observable<string> = new Observable(o => { 
    observer = o; 
    observer.next('Hello'); // the observer emit the data 
}); 

observable.subscribe((data) => { // You subscribe to the observable for new data 
    console.log(data); // Print 'Hello World! 
}); 

observer.next('World!'); 

Hinweis, wenn Sie die beobachtbaren verwenden, um sicherzustellen, dass Alle Komponenten werden bei der Aktualisierung mit den Benutzerinformationen aktualisiert. Ich würde dem Dienst eine Aktualisierungsmethode hinzufügen, mit der der neue Wert ausgegeben werden kann.

@Injectable() 
export class UserInfoService { 

    public user: UserInfo = { 
     firstName: "O", 
     lastName: "K", 
     email: "ol@op.com", 
     country: "uk", 
     avatarUrl: null, 
     receiveNotifications: true 
    } 
    private observer; 
    private observable: Observable<UserInfo>; 

    constructor() { 
     this.observable = new Observable(o => { 
      this.observer = o; 
      this.observer.next(user); 
     }); 
    } 

    getUserInfo(): Observable<UserInfo> { 
     return this.observable; 
    } 

    updateUserInfo(user: UserInfo) { 
     this.user = user; 
     this.observer.next(this.user); 
    } 
} 

nun im Dialogkomponente können Sie die getUserInfo Funktion aus dem Dienst verwenden, um eine beobachtbare erhalten Sie abonnieren können, um Benutzerinformationen zu erhalten. und verwenden Sie die updateUserInfo, um es zu aktualisieren.