Angular 6 Material mat-select değiştirme yöntemi kaldırıldı

129

Açısal Malzeme Tasarımı 6'da (değiştir) yöntemi kaldırılmıştır. Kullanıcı seçimini değiştirdiğinde bileşendeki kodu çalıştırmak için değiştirme yöntemini nasıl değiştireceğimi bulamıyorum Teşekkürler!

angular angular6

— Fernando Lacoumette
kaynak

350

Onu değiştirdi changeiçin selectionChange.

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

şimdi

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

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

— VtoCorleone
kaynak

26

Bundan çok nefret ediyorum. Dün, Angular 6'ya geçmenin güzel bir gün olduğunu düşündüm. Bir kez daha sözdizimini değiştirdiler.

— Luis Lavieri

17

(changeEventChange)Değişim olayının ne zaman değiştiğini algılamak için bir olaya ihtiyaçları vardır .

— Stack

3

(seçimDeğiştir) artık (onSelectionChange) olarak güncellenmiştir.

— Debadatta

@Debadatta - Bunu nerede gördün? Hâlâ selectionChange material.angular.io/components/select/api

— VtoCorleone

2

Yukarıdaki tüm yorumlar, mümkün olduğunda aşağıdaki cevabıma göre tepkisel formlara bağlı kalmanın neden mantıklı olduğunu daha da vurguluyor. Bir yan not olarak, yorumların çok adil olduğunu düşünmüyorum çünkü Angular Material çalışanları harika bir iş çıkarıyor ve biz bunu bedavaya alıyoruz.

— Joseph Simpson

24

Reaktif formlar kullanıyorsanız, seçim kontrolündeki değişiklikleri şu şekilde dinleyebilirsiniz ..

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

— Joseph Simpson
kaynak

1

Yukarıdaki reaktif formlar yaklaşımını kullanarak kullanıcı arayüzüne daha az bağlı olduğunuzu ve bu arayüz çerçevesi geliştikçe sorun

— Joseph Simpson

Bunu beğendim, bir deneyeceğim.

— userx

Sadece burada .updateValueAndValidity, kontrole ihtiyacınız varsa { emitEvent: false }, kaçınmak için geçmeyi unutmayın RangeError: Maximum call stack size exceeded. Öte yandan ipucu (+1) için teşekkürler, beni ihtiyacım olan şeye yönlendirdi.

— dcg

Yaklaşımı izlersem ngOnDestroy'daki aboneliğimi iptal etmeli miyim?

— ohidano

Bellek sızıntılarını ve beklenmedik davranışları önlemek için her zaman aboneliklerinizi temizlemeniz gerekir.

— Joseph Simpson

7

İçin:

1) mat-select (selectionChange)="myFunction()"açısal olarak şu şekilde çalışır:

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) Basit html seçimi şu şekilde (change)="myFunction()"açısal olarak çalışır:

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
kaynak

3

Benim için (selectionChange)ve önerilen (onSelectionChange)işe yaramadı ve kullanmıyorum ReactiveForms. Sonunda yaptığım şey şu (valueChange)olayı kullanmaktı :

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

Ve bu benim için çalıştı

— silverhash
kaynak

Bir şablon formu kullanıyorum ve aşağıdakileri kullanarak benim için çalıştı:

<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

Bu sorunu bugün mat-option-group ile yaşıyorum. Problemi çözen şey, mat- select'in sağlanan diğer olayında kullanmak: valueChange

Buraya anlamak için küçük bir kod koydum:

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

Mat Versiyon:

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

— lingar
kaynak