Angular 6マテリアルのマット選択変更方法が削除されました

129

Angular Material Design 6では、（変更）メソッドが削除されました。ユーザーが選択を変更したときに、コンポーネント内のコードを実行するようにchangeメソッドを置き換える方法が見つかりませんThanks！

angular angular6

346

からchangeに変更されましたselectionChange。

<mat-select (change)="doSomething($event)">

今です

<mat-select (selectionChange)="doSomething($event)">

https://material.angular.io/components/select/api

— VtoCorleone
ソース

25

私はこれがとても嫌いです。昨日、Angular 6にアップグレードするのは素晴らしい日だと思いました。もう一度、構文を変更しました。

— Luis Lavieri、2018

17

(changeEventChange)変更イベントが変更されたときに検出するイベントが必要です。

— Stack

3

（selectionChange）が（onSelectionChange）に更新されました。

— デバッタッタ

@Debadatta-これはどこで見ましたか？まだselectionChange material.angular.io/components/select/api

— VtoCorleone

2

上記のすべてのコメントは、可能な限り、以下の私の回答のように、反応型アプローチに固執することが理にかなっている理由をさらに強調するだけです。余談ですが、Angular Materialのスタッフは素晴らしい仕事をしていて、無料で入手できるので、コメントはそれほど公平ではないと思います。

— ジョセフ・シンプソン、

24

Reactiveフォームを使用している場合は、選択コントロールへの変更をリッスンできます。

this.form.get('mySelectControl').valueChanges.subscribe(value => { ... do stuff ... })

— ジョセフシンプソン
ソース

1

それの価値が反応性のフォーム上に使用することは、あなたが以下UIに関連付けられているアプローチとなりにくいというUIフレームワークの進化などの問題を持っていることに注意

— ジョセフ・シンプソン

私はこれが好きだったので、これを試してみます。

— userx 2018年

ここで.updateValueAndValidity、コントロールが必要な場合は、{ emitEvent: false }を回避するために渡すことを忘れないでくださいRangeError: Maximum call stack size exceeded。一方、ヒント（+1）のおかげで、必要なものにたどり着きました。

— dcg

アプローチに従う場合、ngOnDestroyでサブスクライブを解除する必要がありますか？

— ひだの

メモリリークや予期しない動作を回避するには、常にサブスクリプションをクリーンアップする必要があります。

— ジョセフ・シンプソン

7

ために：

1）mat-select (selectionChange)="myFunction()"は次の角度で機能します：

sample.component.html

 <mat-select placeholder="Select your option" [(ngModel)]="option" name="action" 
      (selectionChange)="onChange()">
     <mat-option *ngFor="let option of actions" [value]="option">
       {{option}}
     </mat-option>
 </mat-select>

sample.component.ts

actions=['A','B','C'];
onChange() {
  //Do something
}

2）単純なHTML選択(change)="myFunction()"は次のように角度で動作します：

sample.component.html

<select (change)="onChange()" [(ngModel)]="regObj.status">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

sample.component.ts

onChange() {
  //Do something
}

— カイラス
ソース

3

私にとって(selectionChange)、提案され(onSelectionChange)た方法は機能せず、私はを使用していませんReactiveForms。私がやったことは、次の(valueChange)ようなイベントを使用することでした：

<mat-select (valueChange)="someFunction()">

そして、これは私のために働いた

— シルバーハッシュ
ソース

私は、テンプレートフォームを使用して、以下を使用して私に働いている：

<mat-select placeholder="Select an option" [(ngModel)]="project.managerId" name="managerId" required   (selectionChange)="fillComanager(project.managerId)">   <mat-option *ngFor="let manager of managers" [value]="manager.id"> 	{{ manager.name }}   </mat-option> </mat-select>

— pcdro

1

今日、mat-option-groupでこの問題があります。問題を解決したのは、mat-select：valueChangeの他の提供されたイベントで使用することです

私は理解のためにここに小さなコードを入れました：

<mat-form-field >
  <mat-label>Filter By</mat-label>
  <mat-select  panelClass="" #choosedValue (valueChange)="doSomething1(choosedValue.value)"> <!-- (valueChange)="doSomething1(choosedValue.value)" instead of (change) or other event-->

    <mat-option >-- None --</mat-option>
      <mat-optgroup  *ngFor="let group of filterData" [label]="group.viewValue"
                    style = "background-color: #0c5460">
        <mat-option *ngFor="let option of group.options" [value]="option.value">
          {{option.viewValue}}
        </mat-option>
      </mat-optgroup>
  </mat-select>
</mat-form-field>

マットバージョン：

"@ angular / material"： "^ 6.4.7"、

— リンガー
ソース