javascript - 使用过滤数据时，ion-select 不会呈现选定值

Question

我遇到了 ion-select 动态数据过滤的奇怪错误。在我的应用程序中，用户在注册时应该选择三个安全问题，所以这些问题不能相同。我有很多问题:

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

我的注册表的这一部分看起来像这样:

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

我使用 (ionChange)="chooseQuestion(regModel.SecurityQuestions[i].Question) 来跟踪选定的选项:

 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为ion-select提供问题，遇到问题:selected option doesn't display in UI field. 然后我尝试使用管道作为推荐的方式来过滤数据，同样影响。我将不胜感激任何建议。谢谢。

更新

为了澄清案例，我添加了一些记录并稍微重写了代码。此示例中的三个问题中有两个有管道，而最后一个没有。我得到了正确的值，但没有实际显示。

更新

我仍然不知道为什么@misha130 提出的解决方案没有给出任何结果。所以我试着用 Chrome 检查器四处挖掘，发现这部分没有被调用。(我复制了突出显示的部分但我不确定它是否正确)http://plnkr.co/edit/n4wv2UUdLtCmt4enYuVS?p=catalogue

Answer 1

Angular2 不检测数组及其子对象的变化。为了使它在您的 View 中实际生效，您必须调用更改检测

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