web-dev-qa-db-ja.com

Angular 2つのマテリアルマット選択プログラムで開く/閉じる

マットセレクトをプログラムで開閉する方法を知っている人はいますか？ APIとしては、openとcloseのメソッドがありますが、コンポーネントからそれらのメソッドを呼び出す方法がわからず、サイトにそれを示す例はありません。

ありがとう

angularangular-material2md-select
10
Bhavesh

これらのプロパティにアクセスするには、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を表示します

22
Z. Bagley

マテリアルコンポーネントをTypeScriptコードにあまり緊密に結合しないようにするための別のアプローチは、これをすべて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()を使用しました。

重要な部分は、@ zbagleyが提供した答えのおかげで学んだテンプレート変数（_#mySelect_）のようです。 _@ViewChild_を緊密にバインドせずに機能させるために、いじくり続けました。

乾杯、ダン

5
djmarquette