*ngFor 在 IONIC 2 中具有双向绑定

Question

I have a page with a button, that when is pressed, it shows a modal that contains a checkbox list. When this modal is closed, it returns the items that was checked, and I want to make a new badge for every returned item in the original page.

I was trying with *ngFor, but is not working, because the "tags" was loaded after this page was loaded.

So my question is, how can I make a "*ngFor" that automatically refresh the interface when the model changes? Something like two way binding.

This is my html code:

<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: I return the selected items when modal page is closed, using observable pattern, like this:

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

And I recibe like this:

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

In the console, it shows the items correctly

Answer 1

Try this:

In your class declare tags as a BehaviorSubject

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

When you recieve the new tags you must emit the new value

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

And in your template subcribe to it with the async pipe

<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>