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数据

    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

添加接受您可以在组件中评估的输入的函数：

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

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

Answer 2

在第二个下拉菜单中，您可以这样写

<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>

从下拉菜单1到下拉菜单2的角度2中禁用选定的选项-材质

2 个答案: