Question

TS代码：

import {Component} from '@angular/core';
import {MatTableDataSource} from '@angular/material';

/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
 timeSelection1='';
 timeSelection2=''; 

  resTimePeriodData= [
    "1",
    "2",
    "3",
    "4"
  ] 
}

HTML代码：

<div class="row">
    <div class="col-md-2 ">
        <!-- DROP DOWN FOR CURRENT TIME PERIOD -->
        <mat-form-field>
            <mat-select placeholder="Current Time Period" multiple 
 name="select1" [(ngModel)]="timeSelection1" (ngModelChange)="onchange()" >
                <mat-option *ngFor="
 let time1 of resTimePeriodData
 " [value]="time1">{{ time1 }}</mat-option>
            </mat-select>
        </mat-form-field>
    </div>
</div>
<div class="row">
    <div class="col-md-2">
        <mat-form-field >
            <!-- DROP DOWN FOR PREVIOUS TIME PERIOD -->
            <mat-select  placeholder="Previous Time Period" multiple name="select2" [(ngModel)]="timeSelection2" >
                <mat-option *ngFor="
  let time2 of resTimePeriodData
 " [value]="time2">{{ time2 }}</mat-option>
            </mat-select>
        </mat-form-field>
    </div>
</div>

如何禁用第一个选定的元素以将两个选定的元素下拉到下拉菜单中。如果我在下拉菜单1中选择3，在下拉菜单2中选择2，如果我想从下拉菜单1中选择2，那么我将被选中，并且两个下拉菜单都具有相同的选项！

我尝试过的代码StackBlitz

Answer 1

我会做这样的事情：

HTML：

<div class="row">
    <div class="col-md-2 ">
        <!-- DROP DOWN FOR CURRENT TIME PERIOD -->
        <mat-form-field>
            <mat-select [(value)]="selected" placeholder="Current Time Period" multiple name="select1" [(ngModel)]="timeSelection1">
                <mat-option *ngFor="let time1 of resTimePeriodData" [value]="time1">{{ time1 }}</mat-option>
            </mat-select>
        </mat-form-field>
    </div>
</div>
<div class="row">
    <div class="col-md-2">
        <mat-form-field>
            <!-- DROP DOWN FOR PREVIOUS TIME PERIOD -->
            <mat-select placeholder="Previous Time Period" multiple name="select2" [(ngModel)]="timeSelection2">
                <mat-option *ngFor="let time2 of resTimePeriodData" [value]="time2" [disabled]="isDisable(time2)">{{ time2 }}</mat-option>
            </mat-select>
        </mat-form-field>
    </div>
</div>

TS：

isDisable(obj) {
   var index = this.selected.indexOf(obj);
   if (index == -1) {
      return false;
   }
   else {
     return true;
   }
}

您也可以尝试改进现有代码！

Stackblitz

Answer 2

该值被解释为数字。您可以使用字符串比较禁用属性中的时间选项：

<mat-option [disabled]="time2.toString() === timeSelection1.toString()" *ngFor="
  let time2 of resTimePeriodData
 " [value]="time2">{{ time2 }}</mat-option>

我建议您仅使用数字。

如何禁用垫子下拉选项从一到两个？

2 个答案: