フィルタリングされたデータを使用した場合、ion-selectは選択された値を表示しません

Question

イオン選択の動的データフィルタリングで不思議な不具合が発生しました。私のアプリケーションでは、登録時に3つのセキュリティ上の質問を選択する必要があります。したがって、この質問は同じではありません。私が質問の配列を持っている：

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?'}]; 

私の登録フォームのこの部分は、以下のようになります。私は、選択したオプションを追跡するために(ionChange)="chooseQuestion(regModel.SecurityQuestions[i].Question)を使用

<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> 

：

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)); 
    } 

よりますログのロジックは正常に動作します。初めて私はquestions_filteredを使用してイオン選択の質問を出し、問題が発生しました：選択したオプションがUIフィールドに表示されません。次に、データをフィルタリングするのに推奨される方法でパイプを使用しようとしましたが、同じ効果があります。 私は何かアドバイスをいただきありがとうございます。ありがとうございました。

UPDATE

私はいくつかのレコードを追加し、コードを少し書き直しケースを明確にします。この例の3つの質問のうち2つはパイプを持ち、最後の質問は2つありません。私は正しい値を得るが、実際の表示はしない。

更新

misha130 @によって提案された解決策がどんな結果が得られなかった理由私はまだ知りません。 Chromeのインスペクタで掘り下げようとしましたが、この部分が呼び出されていないことがわかりました（強調表示された部分をコピーしましたが、正しいとは確信していません）http://plnkr.co/edit/n4wv2UUdLtCmt4enYuVS?p=catalogue

Answer 1

Angular2は配列とその子オブジェクト。このために、あなたのビュー内の実際のテイク効果にあなたはより多くの情報については、変化検出

import { ChangeDetectorRef } from '@angular/core'; 

// Inject to constructor 
constructor(public cd:ChangeDetectorRef){} 

// as per your example call it on in your ionChange method 
chooseQuestion(s: string) { 
    this.cd.detectChanges(); 
} 

を呼び出す必要があります：http://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html