使用角度顯示註冊頁面的安全問題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

您可以在secfaq使用*ngFor爲首選（就像你已經這樣做），以及用於濾波陣列創建一個getter第二個*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; 
    } 
} 

在這樣做時，過濾後的陣列將自動更新在第一選擇變化值。