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;
}

}

如何在此处隐藏/显示下拉菜单！在第一个下拉菜单中，当我单击一个下拉菜单中的第二个下拉菜单时，必须具有“ One”和“ Two”之类的选项，并且必须先隐藏第二个下拉菜单，然后单击第二个下拉菜单给我们怎么样？

这是我的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

像这样更改代码

<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 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-form-field标签中很重要。

以下是 Stackblitz demo 供您参考

其他信息：根据您要使用第二个数组的方式，您可能想查看何时使用ngIf和ngShow / ngHige here。基本上ngIf完全从DOM中删除，因此有时您只想隐藏它。

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;
    }
}

如何隐藏/显示下拉Angular2材质？

4 个答案: