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

试试这个：

在您的类中将标记声明为BehaviorSubject

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>

* ng在IONIC 2中使用双向绑定

1 个答案: