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();
  }
}

View a working stackblitz here.

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的紧密绑定的情况下继续修补它。

干杯，丹

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

2 个答案: