如何禁用从一到二的垫子下拉选项？

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>

如何禁用第一个 selected 元素在下拉列表中下拉两个 selected 元素。如果我 select 3 在下拉列表中，我 select 2 在下拉列表中，如果我想 select 2 从下拉列表中，我将得到 selected 并且都下降有相同的选择！

我试过的代码StackBlitz

Answer 1

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

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

不过我建议只使用数字。

Answer 2

我会这样做：

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

如何禁用从一到二的垫子下拉选项？

How to disable mat drop down option from one to two?

typescript

angular-material

angular

angular5