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

问题描述

有人知道如何以编程方式打开或关闭垫选吗?作为pert 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();
  }
}

在此处查看有效的堆叠闪电战.

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