Winkel 6 Materialmattenauswahländerungsmethode entfernt

129

In Angular Material Design 6 wurde die (Änderungs-) Methode entfernt. Ich kann nicht finden, wie die Änderungsmethode ersetzt werden kann, um Code in der Komponente auszuführen, wenn der Benutzer die Auswahl ändert. Danke!

angular angular6 Fernando Lacoumette
quelle

Antworten:

344

Das hat es von changezu geändert selectionChange. 

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

ist jetzt

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

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

VtoCorleone
quelle
25
Ich hasse das so sehr. Gestern dachte ich, es sei ein cooler Tag, um auf Angular 6 zu aktualisieren. Wieder einmal haben sie die Syntax geändert.
Luis Lavieri
17
Sie benötigen ein (changeEventChange)Ereignis, um zu erkennen, wann sich das Änderungsereignis ändert.
Stack Underflow
3
(selectionChange) wird jetzt auf (onSelectionChange) aktualisiert.
Debadatta
@ Debadatta - Wo hast du das gesehen? Ich sehe immer noch selectionChange material.angular.io/components/select/api
VtoCorleone
2
Alle obigen Kommentare verdeutlichen nur weiter, warum es sinnvoll ist, wenn möglich an einem reaktiven Formularansatz gemäß meiner Antwort unten festzuhalten. Nebenbei bemerkt, ich denke nicht, dass die Kommentare sehr fair sind, weil die Jungs von Angular Material einen tollen Job machen und wir ihn kostenlos bekommen.
Joseph Simpson
23

Wenn Sie reaktive Formulare verwenden, können Sie wie folgt auf Änderungen am Auswahlsteuerelement warten. 

this.form.get('mySelectControl').valueChanges.subscribe(value => { ... do stuff ... })
Joseph Simpson
quelle
1
Es ist erwähnenswert, dass Sie mit dem oben genannten Ansatz für reaktive Formulare weniger an die Benutzeroberfläche gebunden sind und weniger Probleme haben, wenn sich das UI-Framework weiterentwickelt
Joseph Simpson,
Mir hat das gefallen, ich werde es versuchen.
Userx
Nur um hier zu beachten, dass Sie, wenn Sie .updateValueAndValiditydie Kontrolle benötigen, nicht vergessen müssen, { emitEvent: false }um zu vermeiden RangeError: Maximum call stack size exceeded. Auf der anderen Seite danke für den Hinweis (+1), es führte mich zu dem, was ich brauchte.
DCG
7

Zum:

1) mat-select (selectionChange)="myFunction()"arbeitet im Winkel wie folgt:

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) Einfache HTML-Auswahl (change)="myFunction()"funktioniert im Winkel wie folgt:

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

Für mich (selectionChange)und den vorgeschlagenen (onSelectionChange)hat nicht funktioniert und ich benutze nicht ReactiveForms. Am Ende nutzte ich das (valueChange)Event wie folgt:

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

Und das hat bei mir funktioniert

Silberhasch
quelle
Ich benutze ein Vorlagenformular und habe mit folgendem gearbeitet: <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

Ich habe dieses Problem heute mit mat-option-group. Die Sache, die mich das Problem gelöst hat, ist die Verwendung in einem anderen bereitgestellten Ereignis von mat-select: valueChange

Ich habe hier einen kleinen Code zum Verständnis eingefügt: 

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

Matte Version:

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

Lingar
quelle