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

Question

我正在编写一个小应用程序。

在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也会更新视图，即使我的功能没有更改模型

我怎么能：

• 停止角/离子更改视图或数据
• 决定自己的模型更改
• 仅将数据的当前值显示为绑定

Answer 1

我似乎只是无法实现，我想要什么。我用另一种方法"解决"了问题：

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

我发现，您可以通过绑定残疾属性来禁用复选框。因此，我只检查当前复选框

是否

• 未检查
• 检查了最多的复选框

，如果两者都是正确的，则将其禁用。

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