Отключить выбранную опцию из раскрывающегося списка Один в раскрывающийся список Два в углу 2 - Материал

Question

<div class="row no-overflow">
    <div class="col-md-1 window-pad-height">
        <mat-label> Opportunity 1: </mat-label>
    </div>
    <div class="col-md-2 no-overflow">
        <mat-form-field class="no-overflow">
            <mat-select placeholder="select" [(ngModel)]="oppurtunityOne" [disabled]="selectedRankingCriteria.viewValue!=='Custom'">
                <mat-option *ngFor="let op1 of OppurtunityList" [value]="op1">
                    {{op1.viewValue}}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
</div>

<div class="row no-overflow">
    <div class="col-md-1 window-pad-height">
        <mat-label> Opportunity 2: </mat-label>
    </div>
    <div class="col-md-2 no-overflow">
        <mat-form-field class="no-overflow">
            <mat-select placeholder="select" [(ngModel)]="oppurtinityTwo" [disabled]="selectedRankingCriteria.viewValue!=='Custom'">
                <mat-option *ngFor="let op of OppurtunityList" [value]="op" [disabled]="oppurtunityOne.viewValue">

                    {{op.viewValue}}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
</div>


<div class="row no-overflow">
    <div class="col-md-1 window-pad-height">
        <mat-label> Opportunity 3: </mat-label>
    </div>
    <div class="col-md-2 no-overflow">
        <mat-form-field class="no-overflow">
            <mat-select placeholder="select" [disabled]="selectedRankingCriteria.viewValue!=='Custom'">
                <mat-option *ngFor="let op3 of OppurtunityList" [value]="op3">
                    {{op3.viewValue}}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
</div>


<div class="row no-overflow">
    <div class="col-md-1 window-pad-height">
        <mat-label> Opportunity 4: </mat-label>
    </div>
    <div class="col-md-2 no-overflow">
        <mat-form-field class="no-overflow">
            <mat-select placeholder="select" [disabled]="selectedRankingCriteria.viewValue!=='Custom'">
                <mat-option *ngFor="let op4 of OppurtunityList" [value]="op4">
                    {{op4.viewValue}}
                </mat-option>
            </mat-select>
        </mat-form-field>
        <button mat-raised-button color="primary">View</button>
    </div>
</div>

JSON DATA

    OppurtunityList: any[] = [
    { value: 'col-1', viewValue: 'datatoDisplay1' },
    { value: 'col-2', viewValue: 'datatoDisplay2' },
    { value: 'col-3', viewValue: 'datatoDisplay3' },
    { value: 'col-4', viewValue: 'datatoDisplay4' },
    { value: 'col-5', viewValue: 'datatoDisplay5' },
    { value: 'col-6', viewValue: 'datatoDisplay6' },
    { value: 'col-7', viewValue: 'datatoDisplay7' },
    { value: 'col-8', viewValue: 'datatoDisplay8' },
    { value: 'col-9', viewValue: 'datatoDisplay9' }
  ];

Как отключить выбранную опцию из выпадающего списка, используя машинописный текст?
Какую логику мне здесь поставить, я не знаю, как отключить выбранную опцию.
Можно ли справиться с помощью ngModel?

Answer 1

Во втором раскрывающемся списке вы можете написать как

<div class="col-md-2 no-overflow">
    <mat-form-field class="no-overflow">
        <mat-select placeholder="select" 
                    [(ngModel)]="oppurtinityTwo" 
                    [disabled]="selectedRankingCriteria.viewValue!=='Custom'">
            <mat-option *ngFor="let op of OppurtunityList" 
                        [value]="op" 
                        [disabled]="oppurtunityOne.viewValue === op.viewValue">
                {{op.viewValue}}
            </mat-option>
        </mat-select>
    </mat-form-field>
</div>

Answer 2

Добавьте функцию, которая принимает входные данные, которые вы можете оценить в вашем компоненте:

<!-- html -->
<mat-select placeholder="select" 
[disabled]="disableSelectFunction(selectedRankingCriteria.viewValue)">

//Typescript
disableSelectFunction(value){
    if (value === 'myValue'){
        return true; // disabled
    } else {
        return false; // not disabled
    }
}