angular - Ionic 2 ionic 3 - ion-checkbox inside ngIf or ngSwitch not working -
hi there have problem - ionic 2 ionic 3 - ion-checkbox inside ngfor , condition, such ngif or ngswitch not working
i posted code online working , not working versions..
working
<ion-list> <ion-item *ngfor=" let answer of question.answers"> <ion-label>{{answer.description}}</ion-label> <ion-checkbox (change)="change($event, answer)"></ion-checkbox> </ion-item> </ion-list> 
not working 1
<ion-list> <ion-item *ngfor="let answer of question.answers"> <ng-container *ngif="questiontype.mutiplechoice==question.questiontype_id"> <ion-label>{{answer.description}}</ion-label> <ion-checkbox (change)="change($event, answer)"></ion-checkbox> </ng-container> </ion-item> </ion-list> not working 2
<ion-list> <ion-item *ngfor=" let answer of question.answers"> <ng-container [ngswitch]="question.questiontype_id"> <ng-container *ngswitchcase="questiontype.mutiplechoice"> <ion-label>{{answer.description}}</ion-label> <ion-checkbox (change)="change($event, answer)"></ion-checkbox> </ng-container> </ng-container> </ion-item> </ion-list> this 1 working until trying enter checkboxes inside… tried templates , span tags instead of ng-container… etc…
<ion-list> <ion-item> <div *ngfor="let answer of question.answers"> <div [ngswitch]="question.questiontype_id"> <span *ngswitchcase="questiontype.yesno"> <span *ngif="answer.description=='yes'" style=" display: inline-block;"> <button ion-fab right><ion-icon name="checkmark"></ion-icon></button> </span> <span *ngif="answer.description=='no'" style=" display: inline-block;"> <button ion-fab color="danger" left><ion-icon name="close"></ion-icon></button> </span> </span> <ng-container *ngswitchcase="questiontype.onechoise"> {{ answer.description }} </ng-container> <ng-container *ngswitchcase="questiontype.mutiplechoice"> {{ answer.description }} <!-- <ion-label>{{ answer.description }}</ion-label> --> <!-- <ion-checkbox color="dark" checked="answer.checked" [(ngmodel)]="answer.checked"></ion-checkbox> --> </ng-container> </div> </div> </ion-item> </ion-list> 
ngswitch works other types - yes no , or 1 choice , not here when adding ion checkbox. json working also, meaning without checkbox or without switch can see multiple options.
any ideas how can solves ? missing? puling hear day now…
did solve it?
i think solve issue.
export class homepage { questions = [{id:1,text:'question 1', answers:[{id:1},{id:2}]},{id:2,text:'question 2', answers:[{id:11},{id:22}]}] constructor(private navcontroller: navcontroller, private service: service, private formbuilder:formbuilder) { this.surveyform = this.formbuilder.group({ questions: formbuilder.array([]) }) (var = 0; < this.questions.length; i++) { // multiple let question = formbuilder.group({ question_id: [this.questions[i].id, validators.required], answer_ids: formbuilder.array([]) }); this.surveyform.controls['questions'].push(question); } } onchange(id, ischecked, index) { const answers = <formarray>this.surveyform.controls.questions.controls[index].controls.answer_ids if(ischecked) { answers.push(new formcontrol(id)) } else { let idx = answers.controls.findindex(x => x.value == id) answers.removeat(idx) } } }<ion-header> <ion-navbar> <ion-title>{{ appname }}</ion-title> </ion-navbar> </ion-header> <ion-content padding> <div *ngif="surveyform"> <form [formgroup]="surveyform"> <div formarrayname="questions"> <div *ngfor="let question of questions; let = index" [formgroupname]="i" padding-bottom> <ion-row> <ion-col col-10> <h5>{{ question.text }}</h5> <ng-container> <ion-list formarrayname="answer_ids"> <div *ngfor="let choice of question.answers; let j = index"> <ion-item> <ion-label style="white-space: normal;">{{ choice.id }}</ion-label> <ion-checkbox (ionchange)="onchange(choice.id, $event.checked, i)" value="choice.id"></ion-checkbox> </ion-item> </div> </ion-list> </ng-container> </ion-col> </ion-row> </div> </div> </form> </div> <pre>{{surveyform.value | json}}</pre> </ion-content>http://plnkr.co/edit/yv94zjypwbghalb0rlk2?p=preview trying now.
Comments
Post a Comment