如何隐藏/显示 Angular2 Material 的下拉列表？

146 浏览
0 Comments

如何隐藏/显示 Angular2 Material 的下拉列表？

我的HTML

	
		 {{ first }}
		
	


	
		 {{ second }}

我的TS

import { Component } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
/**
 * @title Basic use of `

` */ @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

admin 更改状态以发布 2023年5月25日
0

2 答案

0 Comments

您可以使用ngIf根据第一个元素的选择隐藏第二个元素。


    
         {{ first }}
        
    


    
         {{ second }}

注意：将*ngIf放在mat-form-field标记中很重要。

这里是一个 Stackblitz演示，供您参考

附加信息：根据您要如何使用第二个数组，您可能想要查看何时使用ngIf和ngShow/ngHide 此处。基本上，ngIf会完全从DOM中删除，因此有时您只想将其隐藏。

0
0 Comments

只需要在底部下拉菜单上添加*ngIf="dropDownOne === 'One'"。还要将包装器从mat-form-field更改为div，否则Angular将在底部选择列表未显示时发生错误。

试试看：


    
        
          {{ first }}
        
    

    
      
        {{ second }}

这里有一个可用的StackBlitz示范供您参考。

0