用离子分离离子列表和离子网格中的项目

时间:2018-06-03 07:53:04

标签: ionic-framework

我正在研究离子应用程序,我希望显示状态列表,并且我希望指定与短信或电子邮件联系的方式。 这是html代码:

<ion-content padding>
    <ion-grid >
      <ion-list >
        <ion-row *ngFor="let state of states" ([ngModel])="notifMode">
          <ion-item >
            <ion-label> {{state}}</ion-label>
          </ion-item>
          <ion-grid >
            <ion-row item-content>
              <ion-col col-md-3 class="align-text-middle">
                <ion-label  >SMS</ion-label>
                <ion-checkbox (ionChange)="onChangeSms()"  ></ion-checkbox>
              </ion-col>
              <ion-col col-md-3 class="align-text-middle">
                <ion-label >Email</ion-label>
                <ion-checkbox (click)="onChangeEmail()" ></ion-checkbox>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-row>
      </ion-list>
    </ion-grid>
    <button ion-button outline  (click)="setNotifMode()">Next</button>
</ion-content>

这是组件:

 notifMode : NotifMode;
 smsChecked : boolean ;
 emailChecked : boolean ;
constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.getStates();
  }
onChangeSms() {
    this.smsChecked = !this.smsChecked;
    console.log('sms checked:' + this.smsChecked);
   }

  onChangeEmail() {    
   this.emailChecked = !this.emailChecked;
    console.log('email checked:' + this.emailChecked);
   }
setNotifMode(){
    for(let state of this.states){
      let obj = {
        "state" : state,
        "sms" : this.smsChecked,
        "email" : this.emailChecked,
      }
      this.notifMode = obj;
      console.log(this.notifMode);
    }

  }

这是模型:

export class NotifMode {
    public constructor (
        public state : string,
        public sms : boolean,
        public email : boolean,
    ){}
}

问题在于,当我点击不同状态的短信或电子邮件时,它似乎是相同的状态。

我如何单独分开每件物品?

enter image description here

enter image description here

0 个答案:

没有答案