2016-09-26 12 views
3

Observableデータサービスを実装するために基本的にはthis guideの後に続きます。今、このObservableの変更がビューに反映されない

<ion-slide *ngFor="let item of itemStore.items | async" > 
    [...] 
</ion-slide> 

:私の項目のリストを保持しているBehaviorSubject

items:BehaviorSubject<List<Item>> = new BehaviorSubject(List([])); 

ストアクラス(ItemsStore)、私が持っているで

は、コンポーネントは、テンプレート内の店舗は以下のようにすることを使用していますアプリケーションが読み込まれると正常に動作し、すべてのアイテムが表示されます。 Iストアクラスで次のコードを使用して BehaviorSubjectに項目を追加する場合は、:

this.items.next(this.item.getValue().push(newItem)); 

これは、ビューに反映されません。私は印象を受けていましたが、変更処理はangular2で自動的に行われましたが、そうではないようです。

ビューに反映されるように、このような変更を検出して処理する方法を教えてください。

答えて

1

itemsプロパティはObservableである必要がありますが、BehaviourSubjectタイプとして設定します。あなたのリンクにあります:あなたが呼び出す

private _items: BehaviorSubject<List<Item>> = new BehaviorSubject(List([])); 
public items: Observable<List<Item>> = this._items.asObservable(); 
+0

あなたは間違いなく、完全にそれを欠場しています。 'BehaviourSubject'が' Observable'を拡張するときに '.asObservable()'を呼び出さなければならない理由は分かりませんが。残念ながら、それはまだ動作しません。 –

1

私は不審なよ問題は方法である:

this.items.next(this.item.getValue().push(newItem)); 
ので、あなたがこのような何かを行う必要があり、このチュートリアルに続くと仮定し

@Injectable() 
export class TodoStore { 
    private _todos: BehaviorSubject<List<Todo>> = new BehaviorSubject(List([])); 

    public todos: Observable<List<Todo>> = this._todos.asObservable(); 

    constructor(private todoBackendService: TodoBackendService) { 
     this.loadInitialData(); 
    } 
    ... 
} 

this.item.getValue()が返ってきたのですが、push()の方法がArray.push()と同じ場合は、新しい長さを返します(重要なことはを返しません新しい項目が追加された)。

asyncパイプを次のように定義される。

非同期パイプが観測またはプロミスに加入し、それがを出射さた最新の値を返します。

あなたがthis.items.next(...)を呼び出すときに非同期パイプはちょうど新しい長さを受け取り、*ngForでそれを反復処理しようとします。

this.item<List<Item>>を保持している、あなたはおそらく呼び出したい場合:

this.item.getValue().push(newItem); 
this.items.next(this.item); 

ところで、asObservable()方法は、あなたがSubjectで作業しているという事実を隠すために使用されます。件名はnext()またはcomplete()です。これは他のユーザーに混乱させたくないものです。この理由から、どこにでもObservableを渡して、あなたが必要と知っている場所に限り、Subjectを保管してください。

1

解決しました - それは私にとって非常にばかげた間違いでした。ItemsStoreは2つの異なるクラスに注入され、依存インジェクションは各インジェクションウェルのインスタンスを作成するため、同じ種類の2つのインジェクションウェルを作成します。

依存関係(ItemsStore)をグローバルプロバイダアレイに移動することで問題が解決されました。

関連する問題