Question

我试图实现3个选择下拉列表，这些下拉列表具有与选项相同的对象数组。所有3个下拉列表都是互斥的，即如果我在一个下拉列表中选择一个选项，则不应该在另外两个下拉列表中显示等等。这是我的代码：

home.component.html

<select formControlName="secQues1" id="securityQuestion1"
class="form-control">
    <option value="" disabled>Select your first security question...</option>
    <option *ngFor="let question of securityQuestions" [value]="question.index">
    {{question.name}}</option>
</select>

<select formControlName="secQues2" id="securityQuestion2"
class="form-control">
    <option value="" disabled>Select your first security question...</option>
    <option *ngFor="let question of securityQuestions" [value]="question.index">
    {{question.name}}</option>
</select>

<select formControlName="secQues3" id="securityQuestion3"
class="form-control">
    <option value="" disabled>Select your first security question...</option>
    <option *ngFor="let question of securityQuestions" [value]="question.index">
    {{question.name}}</option>
</select>

这是我的选项数组。这里有大约15-20个条目。

home.component.ts

securityQuestions = [{
    index : 0,
    name : "What was your childhood nickname?"
},{
    index : 1,
    name : "In what city did you meet your spouse/significant other?"
}]

我尝试过使用3个不同的阵列，然后从2个阵列进行拼接，但是当有人更改选项时它不起作用（在这种情况下，旧选项应该被添加回其他2个下拉列表）。有什么建议吗？

Answer 1

我会为您的question模型添加另一个属性，即selectedIn。所以你会知道它已经在其他地方被选中了，而<select>就是它。

securityQuestions = [{
    index : 0,
    name : "What was your childhood nickname?",
    selectedIn : 2
},{
    index : 1,
    name : "In what city did you meet your spouse/significant other?",
    selectedIn : 1
}]

然后，您可以简单地隐藏给定选项（如果已在其他位置选择）：

<select (change)="onSelectChange($event,1)">
    <option value="" disabled>Select your first security question...</option>
    <option *ngFor="let question of securityQuestions" [hidden]="question.selectedIn && !question.selectedIn==1" [value]="question.index" >
    {{question.name}}</option>
</select>

<select (change)="onSelectChange($event,2)">
    <option value="" disabled>Select your second security question...</option>
    <option *ngFor="let question of securityQuestions" [hidden]="question.selectedIn && !question.selectedIn==2" [value]="question.index" >
    {{question.name}}</option>
</select>

<select (change)="onSelectChange($event,3)">
    <option value="" disabled>Select your third security question...</option>
    <option *ngFor="let question of securityQuestions" [hidden]="question.selectedIn && !question.selectedIn==3" [value]="question.index" >
    {{question.name}}</option>
</select>

在您的组件中：

onSelectChange($event, selectIndex){
    let questionIndex = Number($event.target.value) // 2 == question.index

    // Now update the securityQuestions array
    securityQuestions = securityQuestions.map( question => {
        // delete previous selection if any
        if(question.selectedIn == selectIndex) delete question.selectedIn
        // Mark the current question as selected in <select> n°1
        if(question.index == questionIndex) question.selectedIn = selectIndex
        return question
    })
}

Answer 2

我会做OctavianMărculescu建议的事情。三个不同的数组，只根据下拉列表的选定值进行过滤。

selectOneValue
selectTwoValue
selectThreeValue

我不确定您是否要使用ngModel绑定所选值，或者您是否要使用其他方法。

<强> template.component.html

<select (change)="selectChange($event, 1)" formControlName="secQues1" id="securityQuestion1" class="form-control">
    <option value="" disabled>Select your first security question...</option>
    <option *ngFor="let question of securityQuestions1" [value]="question.index"> {{question.name}}</option>
</select>

<select (change)="selectChange($event, 2)" formControlName="secQues2" id="securityQuestion2" class="form-control">
    <option value="" disabled>Select your first security question...</option>
    <option *ngFor="let question of securityQuestions2" [value]="question.index">
    {{question.name}}</option>
</select>

<select (change)="selectChange($event, 3)" formControlName="secQues3" id="securityQuestion3" class="form-control">
    <option value="" disabled>Select your first security question...</option>
    <option *ngFor="let question of securityQuestions3" [value]="question.index">
    {{question.name}}</option>
</select>

<强> component.ts

public selectOneValue;
public selectTwoValue;
public selectThreeValue;

public securityQuestions1 = []

public securityQuestions2 = []

public securityQuestions3 = []

constructor(private questionsService: QuestionsService){
 // get your questions promise or observable 

  this.securityQuestions1 = Object.assign([], securityQuestionsSource);
  this.securityQuestions2 = Object.assign([], securityQuestionsSource);
  this.securityQuestions3 = Object.assign([], securityQuestionsSource);
}

public selectChange($event, secQuestionArray: number) {

    if(secQuestionArray == 1){
        // filter 2 and 3
    } else  if (secQuestionArray == 2){
        // filter 1 and 3
    } else if(secQuestionArray == 3){
        // filter 1 and 2
    }
}

在Angular 4中使用相同选项进行互斥选择

2 个答案: