* ngFor with Ionic 2の2ウェイバインディング

Question

ボタンが付いたページがあります。これを押すと、チェックボックスのリストを含むモーダルが表示されます。このモーダルが閉じられると、チェックされたアイテムが返され、元のページに返されるアイテムごとに新しいバッジを作成したいと思います。

* ngForで試していましたが、このページが読み込まれた後に「タグ」が読み込まれたため動作しませんでした。

私の質問は、モデルを変更したときに自動的にインターフェースをリフレッシュする「* ngFor」を作る方法です。双方向バインディングのようなもの。

これは私のhtmlコードです：

<button ion-item detail-push (click)="showTagsDialog()"> 
    <div style="float:left; width:100%; display:block; margin-left:-10px;"> 
     <button ion-button style="float:left; font-size:1.2rem !important; color:#999; float:left; display:block; text-transform: capitalize;" clear> 
      Tags      
     </button> 
    </div>    
    <ion-badge *ngFor="let tag of tags">{{tag.name}}</ion-badge>  
</button> 

EDIT：

dismiss() { 
    this.events.publish(EventIndex.onTagsModalClose, this.dataset.filter(x => { return x.isSelected==true })); 
    this.viewCtrl.dismiss(); 
} 

そして、私はこのようなrecibe：モーダルページが閉じているときに、私はこのように、観察可能なパターンを使用して、選択した項目を返します。コンソールで

private onTagsModalClose(args: any) {   
    this.tags = args; 
    this.hasSelectedTags = (<any[]>args).length > 0; 
    console.log(this.tags); 
} 

、それは

正しく項目を示してい

Answer 1

これを試してください：あなたは、新しい値

private onTagsModalClose(args: any) {   
    this.tags.next(args); 
    this.hasSelectedTags = (<any[]>args).length > 0; 
    console.log(args); 
} 

を発するとするテンプレートのsubcribeにしなければならない新しいタグを受け取るときに、あなたのクラスで

がBehaviorSubject

tags : BehaviorSubject<any> = new BehaviorSubject([]); 

としてタグを宣言それは非同期パイプを使用しています

<button ion-item detail-push (click)="showTagsDialog()"> 
    <div style="float:left; width:100%; display:block; margin-left:-10px;"> 
     <button ion-button style="float:left; font-size:1.2rem !important; color:#999; float:left; display:block; text-transform: capitalize;" clear> 
      Tags      
     </button> 
    </div>    
    <ion-badge *ngFor="let tag of tags | async">{{tag?.name}}</ion-badge>  
</button>