离子/角度复选框自定义逻辑答案

【问题标题】：Ionic/Angular checkbox custom logic离子/角度复选框自定义逻辑
【发布时间】：2017-03-01 06:33:27
【问题描述】：

我正在用 Ionic 2 编写一个小应用程序。在这个应用程序中，我有一个“复选框模式”，它可以为我的应用程序状态中的元素列表创建一个选项。

在 html 中：

<ion-list>
    <ion-item *ngFor="let key of itemDic.keys()">
        <ion-label>{{itemDic.get(key)}}</ion-label>
        <ion-checkbox (click)="toggleItem(key)" value="key" [checked]="selectedItems.indexOf(key) > -1"></ion-checkbox>
    </ion-item>
</ion-list>

切换方式：

// Data used
this.itemDic = ... // local. saves possible options
this.selectedItems = ... // reference to appstate (global object). saves the selected values

// toggle function
toggleItem(item: any) {
    if(searchState.contains(...)) {
        searchState.remove(...);
    } else {
        if (this.selectedItems.length >= this.maxItems)
            return;

        searchState.set(...);
    }
}

当我想扩展它的功能，只允许一次选择 x 时，我遇到了以下问题：

数据绑定似乎不起作用
即使我的函数没有更改模型，Angular 也会更新视图

我该怎么做：

阻止 angular/ionic 更改视图或数据
自行决定模型更改
仅将数据的当前值显示为绑定

【问题讨论】：

标签： javascript html angular typescript ionic2

【解决方案1】：

我只是似乎没有办法实现我想要的。我用另一种方法“解决”了这个问题：

<ion-checkbox 
    (click)="toggleItem(key)" 
    value="key" 
    [disabled]="selectedItems.indexOf(key) === -1 && selectedItems.length >= 3" 
    [checked]="selectedItems.indexOf(key) > -1">
</ion-checkbox>

我发现，您可以通过绑定到 disabled 属性来禁用复选框。所以我只是检查当前的复选框

未选中
选中的复选框超过了最大数量

如果两者都为真，则禁用它。

如果有人知道更好的方法，请发布。

【讨论】：