Ion-select doesn't work properly with dynamic/filtered data


#1

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(e) {
console.log(this.TAG + 'chooseQuestion: event value1: ’ + e);
this.questions.filter(res => res.question == e).map(res => res.isSelected = true);
//todo rewrite this govno
this.questions.filter(res => res.isSelected == true &&
res.question != this.regModel.SecurityQuestions[0].Question &&
res.question != this.regModel.SecurityQuestions1.Question &&
res.question != this.regModel.SecurityQuestions[2].Question)
.map(res => res.isSelected = false);

    this.questions_filtered = this.questions.filter(res => res.isSelected == false);
    this.cd.detectChanges();

  }

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.

enter image description here

After some research I assumed that it could be connected with Angular detection mechanism - I added this.cd.detectChanges(); at the end of my chooseQuestion(e) method.

I still don’t know why solution didn’t give any result. So I tried to dig around with Chrome inspector, and found out that this part wasn’t called.(I copied highlighted part but I’m not sure was it correct) http://plnkr.co/edit/n4wv2UUdLtCmt4enYuVS?p=catalogue