时间戳

首页 > 解决方案 > 如何隐藏/打开 Angular 材质下拉菜单

angular - 如何隐藏/打开 Angular 材质下拉菜单

问题描述

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

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
 }

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

标签： angular

解决方案

您可能只是缺少要使用 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

推荐阅读