Как отключить опцию выпадающего коврика от одного до двух? - PullRequest
Новая
       6

Как отключить опцию выпадающего коврика от одного до двух?

0 голосов
/ 17 января 2019

Код 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 в раскрывающемся списке 1 и выберу 2 в раскрывающемся списке 2, и если я хочу выбрать 2 в раскрывающемся списке, я получу выбор, и оба выпадут с одним и тем же параметром!

Код, который я пробовал StackBlitz

Ответы [ 2 ]

0 голосов
/ 21 января 2019

Я бы сделал что-то вроде этого:

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

0 голосов
/ 17 января 2019

Значение интерпретируется как число. Вы можете сравнить параметры времени в отключенном атрибуте, используя строку: 

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

Я бы рекомендовал использовать только цифры.

...