Angular 6 Metode perubahan mat-pilih material dihilangkan

129

Di Angular Material Design 6, metode (ubah) telah dihapus. Saya tidak dapat menemukan cara mengganti metode perubahan untuk mengeksekusi kode dalam komponen ketika pengguna mengubah pilihan Terima kasih!

angular angular6 Fernando Lacoumette
sumber

Jawaban:

348

Mengubahnya dari changemenjadi selectionChange. 

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

sekarang

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

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

VtoCorleone
sumber
26
Aku sangat benci ini. Kemarin saya pikir itu adalah hari yang keren untuk meningkatkan ke Angular 6. Sekali lagi, mereka mengubah sintaks.
Luis Lavieri
17
Mereka membutuhkan (changeEventChange)acara untuk mendeteksi kapan perubahan acara berubah.
Stack Underflow
3
(selectionChange) sekarang diperbarui menjadi (onSelectionChange).
Debadatta
@Debadatta - Di mana Anda melihat ini? Saya masih melihat selectionChange material.angular.io/components/select/api
VtoCorleone
2
Semua komentar di atas hanya lebih jauh menyoroti mengapa masuk akal untuk tetap menggunakan pendekatan formulir reaktif, sesuai jawaban saya di bawah, jika memungkinkan. Di samping catatan, menurut saya komentarnya tidak terlalu adil karena orang-orang Angular Material melakukan pekerjaan luar biasa dan kami mendapatkannya secara gratis.
Joseph Simpson
24

Jika Anda menggunakan formulir Reaktif Anda dapat mendengarkan perubahan pada kontrol pilih seperti itu .. 

this.form.get('mySelectControl').valueChanges.subscribe(value => { ... do stuff ... })
Joseph Simpson
sumber
1
Perlu dicatat bahwa menggunakan pendekatan bentuk reaktif di atas Anda tidak terlalu terikat dengan UI dan cenderung tidak mengalami masalah karena kerangka kerja UI tersebut berkembang
Joseph Simpson
Saya menyukai ini, saya akan mencobanya.
userx
Sekadar dicatat di sini bahwa jika Anda perlu .updateValueAndValiditykontrol jangan lupa { emitEvent: false }untuk menghindari RangeError: Maximum call stack size exceeded. Di sisi lain, terima kasih atas petunjuk (+1), ini menuntun saya ke apa yang saya butuhkan.
dcg
Apakah saya harus berhenti berlangganan ngOnDestroy jika saya mengikuti pendekatan ini?
ohidano
Anda selalu perlu membersihkan langganan Anda untuk menghindari kebocoran memori dan perilaku tak terduga.
Joseph Simpson
7

Untuk:

1) mat-pilih (selectionChange)="myFunction()"bekerja dalam sudut seperti:

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) Pilihan html sederhana (change)="myFunction()"berfungsi dalam sudut seperti:

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
}
Kailas
sumber
3

Bagi saya (selectionChange)dan yang disarankan (onSelectionChange)tidak berhasil dan saya tidak menggunakan ReactiveForms. Apa yang akhirnya saya lakukan adalah menggunakan (valueChange)acara seperti:

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

Dan ini berhasil untuk saya

silverhash.dll
sumber
Saya menggunakan formulir template, dan mengerjakannya dengan yang berikut ini: <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

Saya mengalami masalah ini hari ini dengan mat-option-group. Hal yang memecahkan masalah saya adalah menggunakan acara lain yang disediakan mat-pilih: valueChange

Saya taruh di sini sedikit kode untuk memahami: 

<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>

Versi Mat:

"@ angular / material": "^ 6.4.7",

lingar
sumber