如何根據其他下拉菜單的選擇禁用下拉選項？

Question

我需要根據當前下拉列表中的選定值禁用其他下拉列表中的選定值下面我提到了我的案例。

我有動態下拉列表，所以每個下拉列表都屬於同一個 headerList 數組。

沒有。 的下拉菜單。

例如：

我總共有 10 個下拉菜單。 如果第一個下拉菜單中的用戶 select Email，則所有其他下拉菜單應禁用此 Email 選項，如果用戶將所選值從 Email 更改為電話號碼，則應為所有下拉菜單啟用 Email，並且應為所有下拉菜單禁用電話號碼。

應用程序組件.ts

public headerList :string[]=['First Name','Last Name','Company Name','Email','Phone Number','Lead Source','Details','Address 1','Address 2','City','State','Country','Zip','Tags','Assign To'];
public disabledDropdownItems : string[]=[];

onDropdownChange(event,index){
        
        if(event.target.value != ""){
                this.disabledDropdownItems.push(event.target.value);
                this.selectedDropdownColumns.push(index+';'+event.target.value);
        }
        else{
            
            let deselectItem =  this.selectedDropdownColumns.filter(item => item.includes(index+";"));
            
            if(deselectItem != undefined && deselectItem.length > 0 ){
                this.disabledDropdownItems.splice(this.disabledDropdownItems.indexOf(deselectItem[0],1));
                this.selectedDropdownColumns = this.selectedDropdownColumns.filter( selectedItem => selectedItem != deselectItem[0]);   
            }
            
        }
    }

app.component.html

 <div class="row" *ngFor="let header of manageLeadDataDto.header;let i = index"><br>
    <div class="col-lg-2">
    <input class="h-w-15" id="{{i}}" type="checkbox" (click)="onSelectDeselectCheckBox($event,i);"
                                        title="Select {{header}}">
    </div>
        <div class="col-lg-5">{{header}}</div>
        <div class="col-lg-5">
            <select  class="selectpicker" (change)="onDropdownChange($event,i);">
                <option value="" [selected]="true">Please select value</option>
                <option *ngFor="let header of headerList" value="{{header}}" [disabled]="disabledDropdownItems.includes(header)">{{header}}</option>
            </select>
        </div>
    </div>

以上是我的代碼，但它沒有禁用下拉值

Answer 1

這很簡單，我們所要做的就是將索引和選定的值保存在一個變量中，在這里

<div class="row" *ngFor="let header of [1,2,3,4,5];let i = index"><br>
    <div class="col-lg-2">
    <input class="h-w-15" id="{{i}}" type="checkbox" (click)="onSelectDeselectCheckBox($event,i);"
                                        title="Select {{header}}">
    </div>
        <div class="col-lg-5">{{header}}</div>
        <div class="col-lg-5">
            <select  class="selectpicker" (change)="onDropdownChange($event,i);">
                <option value="" [selected]="true">Please select value</option>
                <option *ngFor="let header of headerList; let j = index"
                value="{{header}}"
                [disabled] = 'header===disabledItem &&  (selectIndex && selectIndex != i+1)'
                >{{header}}</option>
            </select>
        </div>
    </div>

在你的 ts

 disabledItem ='';
  selectIndex = 0;
public headerList :string[]=['First Name','Last Name','Company Name','Email','Phone Number','Lead Source','Details','Address 1','Address 2','City','State','Country','Zip','Tags','Assign To'];


onDropdownChange(event , i){
this.selectIndex = i+1;
this.disabledItem = event.target.value;
console.log(event.target.value , i)


}

參考這個工作演示

https://stackblitz.com/edit/angular-giemqz?file=src/app/app.component.html