如何隐藏/显示下拉 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

只需将*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>

---

这里有一个Working Sample StackBlitz 供您参考。

Answer 2

您可以使用 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-form-field 标记中很重要。

这是一个Stackblitz demo供您参考

附加信息：根据您将如何使用第二个数组，您可能需要查看何时使用 ngIf 和 ngShow/ngHige here。基本上 ngIf 完全从 DOM 中删除，所以有时你只想隐藏它。

Answer 3

像这样改变你的代码

<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'" 在下拉值为“Two”时显示选择框

Answer 4

您可以使用 hidden 属性来隐藏第二个下拉菜单。只需将您的更改功能放入第一个下拉列表中。隐藏属性将从视图中隐藏下来，而不是形成dom。 hidden 有一些问题，因为它可能与 display 属性的 CSS 冲突。我已经在 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;
    }
}