Как скрыть / показать выпадающий материал Angular2?

Question

Мой HTML

<mat-form-field class="button-spacing">
	<mat-select placeholder="select" [(ngModel)]="dropDownOne">
		<mat-option *ngFor="let first of test1" [value]="first"> {{ first }}
		</mat-option>
	</mat-select>
</mat-form-field>
<mat-form-field class="button-spacing">
	<mat-select placeholder="select" [(ngModel)]="DropDownTwo" (change)="on()" [hidden]="show" [disabled]="dropDownOne== 'One'||dropDownOne == undefined ">
		<mat-option *ngFor="let second of test2" [value]="second"> {{ second }}
		</mat-option>

	</mat-select>
</mat-form-field>

Мой 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 {
test1 =[
  'One',
  'Two'
]
test2 =[
  1,2,3,4
]
show :boolean = true;


on(){

        this.show = !this.show;
}

}

Как скрыть / показать выпадающий здесь.!в первом раскрывающемся списке у меня есть опция, такая как «Один» и «Два», когда я нажимаю «Один», второй раскрывающийся список должен быть скрыт, не отключен, и когда я нажимаю на параметр «Два» из выпадающего списка первым, будет отображаться второй раскрывающийся список.нам как ??

вот это моя ссылка на StackBliz -> https://stackblitz.com/edit/drow-down-disabled12345677709-gfj1-gxqswz

Answer 1

Вы можете использовать скрытое свойство, чтобы скрыть второй выпадающий список.Просто поместите вашу функцию изменения в первый выпадающий список.Скрытое свойство будет скрывать вниз вид от не дом.скрытый имеет некоторые проблемы, потому что он может конфликтовать с CSS для свойства display.Я тестировал в Chrome версии 72.0.3626.96

Чтобы исправить это, просто добавьте в своем стиле:

[hidden] { display: none !important;}

Мой HTML-код:

<mat-form-field class="button-spacing">
    <mat-select placeholder="select" [(ngModel)]="dropDownOne" 
    (selectionChange)="on($event.value)">
        <mat-option *ngFor="let first of test1" [value]="first"> {{ first }}
        </mat-option>
    </mat-select>
</mat-form-field>

<mat-form-field class="button-spacing" [hidden]="hideDropDown">
    <mat-select placeholder="select" [(ngModel)]="DropDownTwo">
       <mat-option *ngFor="let second of test2" [value]="second"> {{ second }}
       </mat-option>
    </mat-select>
</mat-form-field>

Мой код TS

hideDropDown: boolean;
test1 = [
'One',
'Two'
];

test2 = [
1, 2, 3, 4
];

on(value) {
    if (value === 'One') {
       this.hideDropDown = true;
    } else {
      this.hideDropDown = false;
    }
}

Answer 2

Просто добавьте *ngIf="dropDownOne === 'One'" в нижний выпадающий список.Также измените оболочку с mat-form-field на div, иначе Angular будет выдавать жалобу, если нижний список выбора не отображается.

Попробуйте:

<mat-form-field 
  class="button-spacing">
    <mat-select 
      placeholder="select" 
      [(ngModel)]="dropDownOne">
        <mat-option 
          *ngFor="let first of test1" 
          [value]="first">
          {{ first }}
        </mat-option>
    </mat-select>
</mat-form-field>
<div class="button-spacing">
    <mat-select 
      placeholder="select" 
      [(ngModel)]="DropDownTwo" 
      (change)="on()" 
      *ngIf="dropDownOne === 'One'">
      <mat-option 
        *ngFor="let second of test2" 
        [value]="second">
        {{ second }}
      </mat-option>

    </mat-select>
</div>

---

Вот вам Рабочий образец StackBlitz для вашей ссылки.

Answer 3

Вы можете использовать ngIf, чтобы скрыть второй элемент в соответствии с выбором первого.

<mat-form-field class="button-spacing">
    <mat-select placeholder="select" [(ngModel)]="dropDownOne">
        <mat-option *ngFor="let first of test1" [value]="first"> {{ first }}
        </mat-option>
    </mat-select>
</mat-form-field>

<mat-form-field *ngIf="dropDownOne=='Two'" class="button-spacing">
    <mat-select placeholder="select" [(ngModel)]="DropDownTwo" (change)="on()" [hidden]="show" [disabled]="dropDownOne== 'One'||dropDownOne == undefined ">
        <mat-option *ngFor="let second of test2" [value]="second"> {{ second }}
        </mat-option>
    </mat-select>
</mat-form-field>

Внимание: Важно поместить * ngIf в mat-формус тегом поля.

Вот демо Stackblitz для справки

Дополнительная информация: в зависимости от того, как выСобираясь использовать ваш второй массив, вы можете проверить, когда использовать ngIf и ngShow / ngHige здесь .В основном, ngIf полностью удаляется из DOM, поэтому иногда вы просто хотите скрыть это.

Answer 4

измените свой код следующим образом

<mat-form-field class="button-spacing">
    <mat-select placeholder="select" [(ngModel)]="dropDownOne">
        <mat-option *ngFor="let first of test1" [value]="first"> {{ first }}
        </mat-option>
    </mat-select>
</mat-form-field>
<mat-form-field class="button-spacing">
    <mat-select placeholder="select" [(ngModel)]="DropDownTwo" *ngIf="dropDownOne=='Two'">
        <mat-option *ngFor="let second of test2" [value]="second"> {{ second }}
        </mat-option>

    </mat-select>
</mat-form-field>

Директива *ngIf используется, чтобы показать / скрыть элемент из DOM. *ngIf="dropDownOne=='Two'" показывает поле выбора, когда раскрывающееся значение равно «Два»