モデルが変更されたときにAngular 4 Chaining ObservablesがGUIで更新を引き起こさない

Question

Angular 4 Chaining Observableが、モデルが変更されたときにDOMで更新を引き起こしていません。モデルは、ユーザーと呼ばれるオブジェクトの配列です。 favoriteThisUserが呼び出されると、これが正しく動作し、refreshメソッドが呼び出されます。このメソッドはDOMを更新しませんが、geosearchから正しい結果を返します。誰かが私になぜこれが理由であるか説明することができますか？

refresh() { 
    this.usersService.geosearch(this.usersService.user).subscribe(
     data => { 
     console.log('!!!USESR!!!', data); 
     this.users = data; 
     }, 
     err => { 
     console.log(err); 
     } 
    ); 
    } 

    favoriteThisUser(id: string) { 
    this.usersService.favorite(id).subscribe(
     data => { 
     console.log('SUCCESS!!!', data); 
     this.refresh(); 
     }, 
     err => { 
     console.log(err); 
     } 
    ); 
} 

DOMは、基本的に私は私が正しくあなたを理解願ってい

<div *ngFor="let user of users"> 
... 
    <div *ngIf="user.fav"> 
       <i class="fa fa-star favorite-inline"></i> 
    </div> 
... 
</div> 

Answer 1

を助け

希望は、私は、件名を経由して、テンプレートにバインドし、角度が提供するasyncパイプを使用することをお勧めします。

Subjectは、変更/新しい値を発行するたびにテンプレートを更新する必要があります。 take(1)を使用すると、メモリリークを回避するためにgeosearchメソッドによって返されたObservableが確実に完了します。

コンポーネント：

class myComponent { 
    usersSubject: Subject<UserInterface>; 

    constructor(...) { 
     ... 
     this.usersSubject = new Subject(); 
     ... 
    } 

    refresh() { 
    this.usersService.geosearch(this.usersService.user) 
     .take(1) 
     .subscribe(
      userData => { 
       this.usersSubject.next(userData); 
      } 
     ); 
    } 

} 

テンプレート：

<div *ngIf="usersSubject | async as users> 
    <div *ngFor="let user of users"> 
    ... 
     <div *ngIf="user.fav"> 
        <i class="fa fa-star favorite-inline"></i> 
     </div> 
    ... 
    </div> 
</div> 

Answer 2

です。

favoriteメソッドがObservableまたはSubjectを返すとします。 あなたが発生したいくつかのイベントがあります購読する：あなたは私の推測でそれをコーディングするために

this.someService.someMethod() 
    .subscribe(
    // onNext 
    result => console.log(result), 

    // onError 
    error => console.log(error), 

    // onComplete 
    () => this.foo() 
); 

：

onCompleteの

onNextのonErrorは、基本的にはこのようになります次のようになります。

favoriteThisUser(id: string) { 
    this.usersService.favorite(id).subscribe(
    data => { 
     console.log('SUCCESS!!!', data); 
    }, 
    err => { 
     console.log(err); 
    }, 
    () => { 
     this.refresh(); 
    } 
); 
} 

データのサブスクリプションが完了すると、完了したメソッドが実行されます。エラーがあった場合、完了した（または() =>）は実行されません。ユーザーデータは、Webサービスの呼び出しによって駆動されるため