I encountered strange bug with ion-select dynamic data filtering. In my application user should choose three security question during registration, so this questions cannot be the same. I have array of questions:
questions: Array<{isSelected: boolean;question: string}> = [
{isSelected: false, question: 'What is your pet’s name?'},
{isSelected: false, question: 'What is the first name of the person you first kissed?'},
{isSelected: false, question: 'Who was your childhood hero?'},
{isSelected: false, question: 'What was your first grade friend last name?'},
{isSelected: false, question: 'Where did you celebrate your 20th birthday?'},
{isSelected: false, question: 'In what city or town does your nearest sibling live?'},
{isSelected: false, question: 'What time of the day were you born?'}];
This part of my registration form looks like this:
<ion-item>
<ion-label floating>Select security question*</ion-label>
<ion-select [(ngModel)]="regModel.SecurityQuestions[i].Question" name="Question"
[selectOptions]="sqSelectOptions"
(ionChange)="chooseQuestion(regModel.SecurityQuestions[i].Question)">
<ion-option *ngFor="let sqOption of questions|filterSQ" value="{{sqOption.question}}"> {{sqOption.question}}
</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label floating>Your answer*</ion-label>
<ion-input type="text" required [(ngModel)]="regModel.SecurityQuestions[i].Answer" name="Answer"></ion-input>
</ion-item>
</div>
I use (ionChange)="chooseQuestion(regModel.SecurityQuestions[i].Question)
to track selected options:
chooseQuestion(s: string) {
console.log(this.TAG + 'chooseQuestion: event value: ' + s);
this.questions.filter(res => res.question == s).map(res => res.isSelected = true);
//todo rewrite this
this.questions.filter(res => res.isSelected == true &&
res.question != this.regModel.SecurityQuestions[0].Question &&
res.question != this.regModel.SecurityQuestions[1].Question &&
res.question != this.regModel.SecurityQuestions[2].Question)
.map(res => res.isSelected = false);
this.questions_filtered = this.questions.filter(res => res.isSelected == false);
console.log(this.TAG + 'chooseQuestion: questions: ' + JSON.stringify(this.questions));
console.log(this.TAG + 'chooseQuestion: questions_filtered: ' + JSON.stringify(this.questions_filtered));
}
According to logs logic works fine. For the first time i used questions_filtered to provide questions for ion-select, and encountered problem: selected option doesn’t display in UI field. Then I tried to use pipes as recommended way to filter data, same effect.
I will appreciate any advice. Thank you.
Update
To clarify the case I added some record and rewrote code a little bit. Two of three questions in this example have pipes and last one doesn’t. I get correct values but without actual displaying.