Angular 2材质mat-select以编程方式打开/关闭

Question

有没有人知道如何以编程方式打开或关闭mat-select？作为api,有开放和关闭的方法但不知道如何从组件调用这些方法,并且没有任何示例在现场显示.

谢谢

Answer 1

要访问这些属性,您需要标识DOM元素并使用以下命令访问它ViewChild:

component.html

  <mat-select #mySelect placeholder="Favorite food">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{ food.viewValue }}
    </mat-option>
  </mat-select>

component.ts

import {Component, ViewChild} from '@angular/core';

@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
  styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
  @ViewChild('mySelect') mySelect;
  foods = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];

  click() {
    this.mySelect.open();
  }
}

在这里查看一个有效的stackblitz.

Answer 2

为了避免将材料组件紧密地与打字稿代码耦合，另一种方法是在HTML方面进行处理。

<mat-form-field>
  <mat-select #mySelect placeholder="Favorite food">
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{ food.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>
<br/>
<button (click)="mySelect.toggle()">click</button>

我使用toggle()“选定”答案来打开或关闭面板，尽管您可以根据需要替换open()或close()调用。

关键似乎是#mySelect我通过@zbagley提供的答案而了解到的模板变量（）。我一直不停地修补它，以使其在没有紧密绑定的情况下工作@ViewChild。

干杯，丹