Radio buttons not displaying in nested ionic list - list

I have a nested list with text and radio button that is not displaying in Ionic 2.
This is a bit of a desperate situation and I have been sitting for hours with this. Worst of all it used to work but since updating the framework to 2.0.0-rc.6 it doesn't render anymore.
<ion-list class="opl-question-container">
<ion-item *ngFor="let opl of Opls">
<ion-item *ngFor="let q of opl.Questions" class='questionDescibe' text-wrap>
<ion-list-header>
{{ q.QuestionName }}
</ion-list-header>
<ion-list radio-group text-wrap>
<ion-item *ngFor="let a of q.Answers">
<ion-label class="opl-question-answers">{{a.AnswerDescription}}</ion-label>
<ion-radio [value]='a.AnswerDescription'></ion-radio>
</ion-item>
</ion-list>
</ion-item>
</ion-item>
</ion-list>
If I replace the ion-label and ion-radio with just text it does render.
Any advice perhaps on how to solve this issue?
this is the structure of the Opls
{
"Opl_Id": 103,
"OplDescription": "Lesson One",
"Questions": [
{
"Question_Id": 11,
"QuestionName": "1. How are you today?",
"QuestionDescription": "1. How are you today?",
"QuestionType": "radio",
"Answers": [
{
"Answer_Id": 33,
"AnswerDescription": "I am well thanks",
"Correct": false,
"DateCreated": "0001-01-01T00:00:00",
"DateUpdated": "0001-01-01T00:00:00"
},
{
"Answer_Id": 34,
"AnswerDescription": "Could be better but not too bad",
"Correct": false,
"DateCreated": "0001-01-01T00:00:00",
"DateUpdated": "0001-01-01T00:00:00"
},
{
"Answer_Id": 35,
"AnswerDescription": "Not too good",
"Correct": true,
"DateCreated": "0001-01-01T00:00:00",
"DateUpdated": "0001-01-01T00:00:00"
}
]
},
Thank you

I got it to work using this structure
<ion-col *ngFor="let opl of Opls">
<ion-col *ngFor="let q of opl.Questions">
<ion-list radio-group>
<ion-list-header>
{{q.QuestionName}}
</ion-list-header>
<ion-item *ngFor="let a of q.Answers">
<ion-label class="opl-question-answers">{{a.AnswerDescription}}</ion-label>
<ion-radio [value]='a.AnswerDescription'></ion-radio>
</ion-item>
</ion-list>
</ion-col>
</ion-col>
This replaces the psuedo ion-list and ion-item which i think in the nested repeat on the *ngFor it was causing conflict with the layout display

Related

Button group acting as radio buttons Ionic 2 ionic

I am using ionic 2 and I would like to get a result like this:
For now, I have a simple ion-list :
<ion-list radio-group formControlName="type">
<ion-col col-4 >
<ion-item>
<ion-label>Breakfast</ion-label>
<ion-radio value="breakfast" ></ion-radio>
</ion-item>
</ion-col>
<ion-col col-4 >
<ion-item>
<ion-label>Diner</ion-label>
<ion-radio value="diner" checked="true">
</ion-radio>
</ion-item>
</ion-col>
<ion-col col-4 >
<ion-item>
<ion-label>Lunch</ion-label>
<ion-radio value="lunch" checked="true">
</ion-radio>
</ion-item> </ion-col>
my result :
thanks
You need to implement Ionic Segment to get the expected result.
have a look Ionic-Segment

Ionic ion-list in an ion-item not properly displayed

I have an "ion-list" in an "ion-item" from a parent list in a view. But, the child list doesn't display any data. Here's the code i use to diplay the lists :
<ion-list>
<ion-list-header>
{{ 'forms.settings.areas' | translate }}
</ion-list-header>
<ion-item *ngFor="let area of areas">
<ion-list>
<ion-item class="item-thumbnail-left">
<ion-avatar>
<img src="assets/images/areas/{{ area.logo }}" title="{{ area.translations.fr }}" />
</ion-avatar>
<h2>{{ area.translations.fr }}</h2>
</ion-item>
<ion-item>
<ion-label floating>{{ 'forms.settings.area.followDLC' | translate }}</ion-label>
<ion-toggle [(ngModel)]="area.followDLC" [checked]="area.id == 1" color="primary"></ion-toggle>
</ion-item>
<ion-item *ngIf="area.followDLC">
<ion-label floating>{{ 'forms.settings.area.alertBefore' | translate }}</ion-label>
<ion-range min="0" max="7" step="1" snaps="true" color="primary" pin="true" [(ngModel)]="area.alertBefore">
<ion-label range-left>0</ion-label>
<ion-label range-right>7</ion-label>
</ion-range>
</ion-item>
</ion-list>
</ion-item>
</ion-list>
The ion-list-header is correctly rendered, but the other items are blank.
The "areas" structure on which i loop is an array of objects and seems correct :
[{"id":1,"type":"area","translations":{"fr":"Frigo","en":"Fridge"},"stats":{"totalProducts":5,"totalQuantity":5,"stockPrice":null,"alertOnPeremption":0,"alertOnStockLevel":0},"logo":"frigo.png","_id":"1","_rev":"50-55c270db9c0ac62ae8e378e1773a390c","followDLC":true,"alertBefore":7},
{"id":2,"type":"area","translations":{"fr":"Congélateur","en":"Freezer"},"stats":{"totalProducts":5,"totalQuantity":1,"stockPrice":4.99,"alertOnPeremption":0,"alertOnStockLevel":1},"logo":"congelateur.png","_id":"2","_rev":"19-307ca9a1882e4c1781cad5b062cdd920","followDLC":false,"alertBefore":0},
{"id":3,"type":"area","translations":{"fr":"Garde-Manger","en":"Pantry"},"stats":{"totalProducts":11,"totalQuantity":5,"stockPrice":25.48,"alertOnPeremption":0,"alertOnStockLevel":0},"logo":"garde-manger.png","_id":"3","_rev":"118-2746786125e84ae31dd9bfaaecd73118","followDLC":false,"alertBefore":0}]
The screenshot of the result follows :
Someone can help ?
Okay...
Don't know why the first code doesn't render the way i want... But, i change the view this way :
<ion-item-group *ngFor="let area of areas">
<ion-item-divider color="light">
<ion-avatar>
<img src="assets/images/areas/{{ area.logo }}" title="{{ area.translations.fr }}" />
</ion-avatar>
<h2>{{ area.translations.fr }}</h2>
</ion-item-divider>
<ion-item>
<ion-label item-left stacked>{{ 'forms.settings.area.followDLC' | translate }}</ion-label>
<ion-toggle item-right [(ngModel)]="area.followDLC" [checked]="area.followDLC" color="primary"></ion-toggle>
</ion-item>
<ion-item>
<ion-label item-left stacked>{{ 'forms.settings.area.alertBefore' | translate }}</ion-label>
<ion-range item-right min="0" max="7" step="1" snaps="true" color="primary" pin="true" [(ngModel)]="area.alertBefore">
<ion-label range-left>0</ion-label>
<ion-label range-right>7</ion-label>
</ion-range>
</ion-item>
</ion-item-group>
Then, labels and input renders the way i want...
Thx all

Ionic2 [(ngModel)] freezes ionic if ion-toggle is in modal

I have this code for an <ion-toggle> in a modal page but when I go to the page it freezes Ionic and I need to shut it down to get it working again. When I leave the binding out, the <ion-toggle> is displayed correct. On the same page is a form that is using ngModel.
<ion-item>
<ion-label>public</ion-label>
<ion-toggle (ionChange)="togglePublic()" [(ngModel)]="newComment.public"></ion-toggle>
</ion-item>
Sombody an idea what the problem can be?
The full html .
<ion-content padding>
<ng-container *ngIf="timer">
<ng-container *ngIf="addingComment">
<ion-card-header text-center class="new-comment">
{{newComment.author}}
</ion-card-header>
<ion-card-content>
<form [formGroup]="commentGroup">
<ion-textarea placeholder="" clearInput formControlName="comment" [(ngModel)]="newComment.message"></ion-textarea>
<ion-item *ngIf="commentGroup.controls['comment'].hasError('minlength') && commentGroup.controls.comment.touched" class="invalid">
<p>The comment needs to be at least 4 characters</p>
</ion-item>
<ion-item *ngIf="commentGroup.controls['comment'].hasError('maxlength') && commentGroup.controls.comment.touched" class="invalid">
<p>The max lengt is 140 characters</p>
</ion-item>
<ion-item *ngIf="commentGroup.controls['comment'].hasError('required') && commentGroup.controls.comment.touched" class="invalid">
<p>A comment is required!</p>
</ion-item>
</form>
<ion-item>
<ion-label>public</ion-label>
<ion-toggle (ionChange)="togglePublic()" [(ngModel)]="newComment.public"></ion-toggle>
</ion-item>
<p class="text-center">{{sToTime(newComment.time)}}</p>
<ion-buttons end>
<button (tap)="cancelComment()" color="danger" ion-button small>cancel</button>
<button (tap)="postComment()" ion-button small>post</button>
</ion-buttons>
</ion-card-content>
</ng-container>
<ion-card *ngFor="let comment of commentsToDisplay" class="comment ">
<ng-container *ngIf="!comment.remove && !comment.addComment">
<ion-card-header class="text-center">
{{comment.author}}
</ion-card-header>
<ion-card-content>
<p>{{comment.message}}</p>
<p class="text-center">{{sToTime(comment.time)}}</p>
</ion-card-content>
</ng-container>
<ng-container *ngIf="comment.remove && !comment.addComment">
<div class="fadeout">
<ion-card-header class="text-center">
{{comment.author}}
</ion-card-header>
<ion-card-content>
<p>{{comment.message}}</p>
<p class="text-center">{{sToTime(comment.time)}}</p>
</ion-card-content>
</div>
</ng-container>
</ion-card>
</ng-container>
</ion-content>
And here is the TS constructor where the this.newComment.public to bind is defined in.
constructor(public viewCtrl: ViewController, public navParams: NavParams, public authService: AuthService, public commentData: CommentData) {
this.isSerie = navParams.get('isSerie');
this.media = navParams.get('media');
this.comments = [];
this.commentsToDisplay = [];
this.commentGroup = new FormGroup({ comment: new FormControl('', Validators.compose([Validators.required, Validators.minLength(4), Validators.maxLength(140)])) });
this.forwardingTimer = Observable.timer(0, 250);
this.newComment = {
message: '',
author: this.authService.currentUser.user_name,
time: this.originalTime,
public: true
}
}

Angular2 how to pass an array to component that is part of a reactive form

I am working with Angular2 reactive form (which is a resume form), there are a few fields on the form and then a component qualifications that i need to pass an array to (so that using loop i can display the qualifications of users).
This is how i am passing the data to the component qualifications
<ion-list-header> Qualification & Education </ion-list-header>
<div formArrayName="qualifications">
<div *ngFor="let qualification of profileForm.controls.qualifications.controls; let i=index"
class="panel panel-default">
<qualifications [group]="profileForm.controls.qualifications.controls[i]"></qualifications>
</div>
</div>
This is the html of a qualifications component
<div [formGroup]="qualificationForm">
<ion-item padding>
<ion-label stacked>Qualification</ion-label>
<ion-input type="text" formControlName="position"></ion-input>
<small [hidden]="qualificationForm.controls.position.valid" class="text-danger">
Qualification is required
</small>
</ion-item>
<ion-item padding>
<ion-label stacked>Institution</ion-label>
<ion-input type="text" formControlName="location"></ion-input>
</ion-item>
<ion-item padding>
<ion-label stacked>Date</ion-label>
<ion-input type="date" formControlName="at_date"></ion-input>
</ion-item>
</div>
This is how the qualification array looks like
0:{id: 1744687, location: "Singapore", position: "B Tech", at_date: "09/2014"}
1:{id: 1762435, location: "Singapore", position: "B Tech 2", at_date: "11/2014"}
2:{id: 1802837, location: "Singapore", position: "B Tech 3", at_date: "12/2016"}
I am not able to understand how to pass array of objects to this component so that it can display the qualifications in loop
In ngOnInit i am calling the addQualification function which is as following
addQualification() {
const control = <FormArray>this.profileForm.controls['qualifications'];
const addrCtrl = this.initAddress();
control.push(addrCtrl);
}
initAddress() {
return this.formBuilder.group({
position: ['', Validators.required],
location: [''],
at_date: ['']
});
}
The problem I am having is the form only display the first object of the array and is not looping through

Build an <ion-list radio-group> with ngFor

I'm trying to build an ion-list radio-group with *ngFor from an array. I have an array of games (id, name) and I want only a list with them where the user can choose only one, but local variables seems to be broken (the first should be checked but this does not work too). Here is my code:
<ion-header>
<ion-navbar>
<ion-title>
New match
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list radio-group>
<ion-list-header>
Game
</ion-list-header>
<ion-item *ngFor="let game of games, let i = index">
<ion-label>{{ game.name }}</ion-label>
<ion-radio checked="i == 0" value="game.id"></ion-radio>
</ion-item>
</ion-list>
</ion-content>
What am I doing wrong? Anybody have an idea? Thanks.
You have to use double brackets {{}} around the checked="i==0" and the value="game.id" Like so:
<ion-radio checked="{{i == 0}}" value="{{game.id}}"></ion-radio>
Otherwise, the checked and value attributes evaluate the content as a strings, not expressions.