使用 angular2 和 ionic2 关闭时重置选中的复选框

Question

我在我的应用程序中使用 Angular2 和 ionic2。在这里，我有一个切换。当切换关闭时，我不应该允许用户选择复选框。它对我来说工作正常。问题是当我在切换打开时选择复选框，如果我再次关闭它，那些被选中的复选框应该被重置。

谁能帮我解决这个问题？

我的代码在下面 app.html

<ion-content>
<ion-item class="toggle">
    <ion-label>App Explore</ion-label>
    <ion-toggle class="center" [(ngModel)]="exploreOn" (ionChange)="toggleChange()"></ion-toggle>
</ion-item>
<div class="urban">        
          <div class="ck-button" *ngFor="let slide of tags; let i = index">             
        <label>                 
            <input type="checkbox" value="1" [disabled]="checkboxDisabled" [(ngModel)]="selectname">
            <span>{{slide.tag}} </span>
        </label>
    </div>        
</div>

app.ts

export class AppPage {
selectname: boolean = false;
exploreOn: boolean = false;
checkboxDisabled = true;
checkboxEnabled = false;
public posts: any;
tags: any;
constructor(public navCtrl: NavController, public http: Http) {    
this.http.get('./mockAPI/chatList.json').subscribe(
  data => {
    this.posts = data.json();
    this.tags = this.posts.tags;
    console.log("data", this.tags);
  });
}
toggleChange() {   
  if (this.exploreOn != true) {
  this.checkboxDisabled = true;     
  this.selectname = false;
 }    
 else  {
  this.checkboxDisabled = false;
  }
}

**My josn file lies below**
 "tags": [
    {
        "id": 1,
        "tag": "#jetset"
    },
    {
        "id": 2,
        "tag": "#retailtherapy"
    },
    {
        "id": 3,
        "tag": "#eatsipgroove"
    }
]

Answer 1

您可以改用ion-checkbox。

<ion-checkbox value="1" [disabled]="checkboxDisabled" [(ngModel)]="selectname" [checked]="isChecked">

在组件中

toggleChange() {   
  if (this.exploreOn != true) {
  this.checkboxDisabled = true;  
this.isChecked= false;   //reset checkbox
  this.selectname = false;
 }    
 else  {
  this.checkboxDisabled = false;
  }
}

Answer 2

只需在您的选择名称行中添加(click)="function()"。 检查此代码 声明一个名为 filter 的变量

filter: boolean= false;

然后在html部分使用ngModel来访问和赋值。

<input type="checkbox" [(ngModel)]="filter" (click)="filterData()">

它会调用一个函数 filterData() 你可以用它来完成你所有的功能

filter(){
  this.filter = !this.filter;// this will change value of it true and false 
}

对于更多复选框，您可以使用声明更多变量，如 filter1: boolean