複数のイオントグルが別々に切り替わらない

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にバインドされています。双方向バインディングのため、1つを変更することはすべてに反映されます。

データの保存方法に応じて、元のswitch配列の値を持つか、別の値にしてngModelに設定します。

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