多个离子切换不会单独切换

Question

我正在创建一个离子应用程序，我需要单独控制切换开关。但是，不幸的是，我的代码在点击任何一个开关时将所有开关切换到一起。这可以解决，每个切换都可以单独控制吗？

  

app.ts文件

toggleSwitch(switchName) {
    console.log(switchName + ' toggled');
    console.log('Toggle value=' + this.toggleValue);
  }

  

app.html文件

<ion-row>
        <ion-col>
          <ion-list>
            <ion-item *ngFor="let switch of switches">
              <ion-label>Switch Name: {{switch.Switch.name}}</ion-label>
              <ion-toggle [(ngModel)]="toggleValue" (ionChange)="toggleSwitch(switch.Switch.name)"></ion-toggle>
            </ion-item>
          </ion-list>
        </ion-col>
      </ion-row>

Answer 1

循环中的所有ion-toggle都绑定到同一个变量：toggleValue。由于双向绑定，更改一个将反映在所有。

根据您要保存数据的方式，您可以将值保存在原始switch数组中，也可以单独添加，并将其设置为ngModel。

<ion-toggle [(ngModel)]="switch.value" (ionChange)="toggleSwitch(switch.Switch.name)"></ion-toggle>