2017-07-12 4 views
1

Ich möchte die geschachtelte Eigenschaft eines JSON beobachten. Wenn sich diese geschachtelte Eigenschaft ändert, rufen Sie fn() auf.eckig 4 ​​- beobachten Eigenschaft einer Variablen für die Änderung

export class HeaderComponent { 
    user: any; 

    constructor(){ 
    this.user = { 
     options: [ 
     { name: 'Jenny Hess', img: 'assets/img/avatar/small/jenny.jpg' }, 
     { name: 'Elliot Fu', img: 'assets/img/avatar/small/elliot.jpg' }, 
     { name: 'Stevie Feliciano', img: 'assets/img/avatar/small/stevie.jpg' } 
     ], 
     selected: { name: 'Jenny Hess', img: 'assets/img/avatar/small/jenny.jpg' } 
    } 
    } 

Fn ändert Werte

public changeUser(item) { 
    this.user.selected = item; 
    /*Some Code here*/ 
} 

    public customLogin(user) { 
     /*Some Code here*/ 
     this.user.selected = user; 
     /*Some Code here*/ 
} 

Jedes Mal, wenn der Wert von this.user.selected Änderungen eine Funktion aufrufen. Ich benutze auch rxjx.

Irgendwelche Vorschläge ??

+0

Muss 'HeaderComponent' den Wert oder eine andere Komponente (eine übergeordnete Komponente) überwachen? –

+0

@ ADreNaLiNe-DJ Nr. Wert von 'this.user.selected' wird in' HeaderComponent' über eine Funktion geändert. –

+0

Geben Sie weitere Informationen an, auf welche Weise sich das ändert. Sie können es mit "ngDoCheck" versuchen. –

Antwort

2

Man könnte so etwas tun:

export class HeaderComponent implements OnDestroy { 
    user: any; 
    userSelectSubject: BehaviorSubject<{name: string, img: string}>; 
    private userSelectSubscription: Subscription; 

    constructor(){ 
    this.user = { 
     options: [ 
     { name: 'Jenny Hess', img: 'assets/img/avatar/small/jenny.jpg' }, 
     { name: 'Elliot Fu', img: 'assets/img/avatar/small/elliot.jpg' }, 
     { name: 'Stevie Feliciano', img: 'assets/img/avatar/small/stevie.jpg' } 
     ] 
    } 

    this.userSelectSubject = new BehaviorSubject<{name: string, img: string}>({ name: 'Jenny Hess', img: 'assets/img/avatar/small/jenny.jpg' }); 

    this.userSelectSubscription = this.userSelectSubject.subscribe((newSelectedUser) => { 
     this.user.selected = newSelectedUser; 
    }); 
    } 

    ngOnDestroy() { 
    this.userSelectSubscription.unsubscribe(); 
    } 
} 

Dann brauchen Sie nur this.userSelectSubject.next({...}) Bestehen der neuen ausgewählten Benutzer als Parameter aufrufen.

+0

Dank @Giovane Es half –

Verwandte Themen