отображение вопросов безопасности для страницы регистрации с использованием угловых 2

Question

У меня есть массив вопросов безопасности, и я хочу показать вопросы в раскрывающемся списке. И он не должен повторять один и тот же вопрос другому выпадающему списку. как я достичь с помощью angular2/ionic2

{  
    "content": [ 
    { 
     "secQues": "what is your pet name", 
     "secSeq": 1, 
     "status": "A" 
    }, 
    { 
     "secQues": "what is your nick name", 
     "secSeq": 2, 
     "status": "A" 
    }, 
    { 
     "secQues": "what is your name", 
     "secSeq": 3, 
     "status": "A" 
    } 
    ]  
} 

ionic2 Просмотреть

 <ion-item> 
     <ion-label>My security questions</ion-label> 
     <ion-select [formControl]="securityfaq"> 
      <ion-option *ngFor="let faq of secfaq" [value]="faq.secQues">{{faq.secQues}}</ion-option> 
     </ion-select> 
     </ion-item>  

     <ion-item> 
     <ion-label floating>Security answer</ion-label> 
     <ion-input type="text" [formControl]="securityanswer"> 
     </ion-input> 
     </ion-item>   

Answer 1

Вы можете использовать *ngFor на secfaq для первого выбора (как вы уже делаете) и создать геттер для отфильтрованного массива для второй *ngFor.

Прежде всего, вы должны сохранить выбранный элемент для первого выбора.

<ion-item> 
    <ion-label>My first security questions</ion-label> 
    <ion-select [formControl]="securityfaq" [(ngModel)]="firstFaq"> 
     <ion-option *ngFor="let faq of secfaq" [value]="faq.secQues">{{faq.secQues}}</ion-option> 
    </ion-select> 
</ion-item> 

<ion-item> 
    <ion-label>My second security questions</ion-label> 
    <ion-select [formControl]="securityfaq" [(ngModel)]="secondFaq"> 
     <ion-option *ngFor="let faq of filteredSecfaq" [value]="faq.secQues">{{faq.secQues}}</ion-option> 
    </ion-select> 
</ion-item> 

В этом примере, this.firstFaq и this.secondFaq это выбранное значение из первого и второго вариантов.

Затем вы можете создать геттер:

public firstFaq:Number; 
public secondFaq:Number; 

get filteredSecfaq() { 
    return this.secfaq.filter((faq) => { 
     return this.firstFaq !== faq.secQues; 
    } 
} 

При этом отфильтрованный массив будет автоматически обновляться, когда значение первого изменения селектора.