Angular 2 材料垫选择以编程方式打开/关闭 [英] Angular 2 material mat-select programmatically open/close

问题描述

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

Does any one know how to programmatically open or close mat-select? As pert the api there are methods for open and close but don't know how to call those methods from component and there isn't any example showing that on site.

谢谢

推荐答案

为了访问这些属性，您需要标识 DOM 元素并使用 ViewChild 访问它:

In order to access these properties you need to identify the DOM element and access it with a 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.

这篇关于Angular 2 材料垫选择以编程方式打开/关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！