我正在研究离子应用程序,我希望显示状态列表,并且我希望指定与短信或电子邮件联系的方式。 这是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,
){}
}
问题在于,当我点击不同状态的短信或电子邮件时,它似乎是相同的状态。
我如何单独分开每件物品?