*ng对于在离子 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>

编辑：当模态页面关闭时，我返回选定的项目，使用可观察的模式，如下所示：

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

我是这样接受的：

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

在控制台中，它会正确显示项目

Answer 1

试试这个：

在您的类中将标记声明为行为主体

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

当您收到新标签时，您必须发出新值

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

并在您的模板中使用异步管道订阅它

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