Question

我正在尝试隐藏/打开角度材质下拉菜单。

treps.html

<mat-form-field>
          <mat-select  #color formControlName="colors">
            <mat-option value=''></mat-option>
            <mat-option [value]="color" *ngFor="let color of colors"> {{color}}
            </mat-option>
          </mat-select>
<mat-form-field>

<button (click)="onClick()">Hide/Open</button>

treps.ts

  @ViewChild('color') color

  onClick() {
   this.color.hide()   // Error appears in the console,stating hide is not a function
 }

我尝试检查所有属性，但无法隐藏下拉菜单。

Answer 1

要隐藏，您需要在Mat-select中添加* ngIf属性

这将在特定条件下隐藏按选择键

要实现此目的，您需要添加

<mat-form-field>
          <mat-select  #color formControlName="colors" *ngIf="hideDropdown">
            <mat-option value=''></mat-option>
            <mat-option [value]="color" *ngFor="let color of colors"> {{color}}
            </mat-option>
          </mat-select>
<mat-form-field>

<button (click)="onClick()">Hide/Open</button>

在ts文件中

 hideDropdown : bollean = true;
    onClick() {
      //you can perform your logic to hide in this function
       this.hideDropdown =false   // Error appears in the console,stating hide is not a function
     }

Answer 2

通常，角度方法使用*ngIf属性。但是还有其他一些方法。

1。属性绑定：

<mat-form-field [attr.hidden]="isHidden">
          <mat-select formControlName="colors">
            <mat-option value=''></mat-option>
            <mat-option [value]="color" *ngFor="let color of colors"> {{color}}
            </mat-option>
          </mat-select>
<mat-form-field>

<button (click)="isHidden= !isHidden">Hide/Open</button>

2。 ngClass ：

使用此过程需要相应的shown : {display : none} CSS类。

<mat-form-field [ngClass]="{'shown': isShown}>
          <mat-select formControlName="colors">
            <mat-option value=''></mat-option>
            <mat-option [value]="color" *ngFor="let color of colors"> {{color}}
            </mat-option>
          </mat-select>
<mat-form-field>

<button (click)="isShown = !isShown">Hide/Open</button>

Answer 3

您可能只是缺少要通过ViewChild获得的属性类型。试试这个：

<mat-form-field>
      <mat-select  #color="matSelect" formControlName="colors">
        <mat-option value=''></mat-option>
        <mat-option [value]="color" *ngFor="let color of colors"> {{color}}
        </mat-option>
      </mat-select>
<mat-form-field>

<button (click)="onClick()">Hide/Open</button>

然后在您的控制器中：

@ViewChild('color') color: MatSelect;

onClick() {
  this.color.hide()   // Error appears in the console,stating hide is not a function
}

这里有个例子。对不起，我希望您能从中得到启发： https://stackblitz.com/edit/angular-mkdakz?file=src%2Fapp%2Fapp.component.ts

Answer 4

经过无数次尝试，我发现：

treps.html

<mat-form-field>
          <mat-select  #color formControlName="colors">
            <mat-option value=''></mat-option>
            <mat-option [value]="color" *ngFor="let color of colors"> {{color}}
            </mat-option>
          </mat-select>
<mat-form-field>

<button (click)="onClick()">Hide/Open</button>

treps.ts


 @ViewChild('color') color : MatSelect

  onClick() {
   this.color.close()   // Changed from hide() to close()
 }

Answer 5

您可以同时使用ng-Container和ngIf来实现

<ng-container *ngIf="IsShowHide">
<mat-form-field>
      <mat-select  #color formControlName="colors">
        <mat-option value=''></mat-option>
        <mat-option [value]="color" *ngFor="let color of colors"> {{color}}
        </mat-option>
      </mat-select>
<mat-form-field>
</ng-container>

<button (click)="onClick()">Hide/Open</button>

在ts文件中

onClick(){
  this.IsShowHide = !this.IsShowHide;
}

如何隐藏/打开角度材质下拉菜单

5 个答案: