Método de mudança de seleção do tapete do Angular 6 removido

129

No Angular Material Design 6, o método (alterar) foi removido. Não consigo descobrir como substituir o método de alteração para executar código no componente quando o usuário altera a seleção. Obrigado!

angular angular6 Fernando Lacoumette
fonte

Respostas:

347

O mudou de changepara selectionChange. 

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

é agora

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

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

VtoCorleone
fonte
26
Eu odeio muito isso. Ontem achei que era um dia legal para atualizar para o Angular 6. Mais uma vez, eles mudaram a sintaxe.
Luis Lavieri
17
Eles precisam de um (changeEventChange)evento para detectar quando o evento de mudança muda.
Stack Underflow de
3
(selectionChange) agora é atualizado para (onSelectionChange).
Debadatta
@Debadatta - Onde você viu isso? Ainda vejo selectionChange material.angular.io/components/select/api
VtoCorleone
2
Todos os comentários acima apenas destacam mais por que faz sentido manter uma abordagem de formas reativas, conforme minha resposta abaixo, sempre que possível. Por outro lado, não acho que os comentários sejam muito justos porque o pessoal da Angular Material faz um trabalho incrível e nós o obtemos de graça.
Joseph Simpson
24

Se você estiver usando formulários reativos, poderá ouvir as alterações no controle de seleção, assim .. 

this.form.get('mySelectControl').valueChanges.subscribe(value => { ... do stuff ... })
Joseph Simpson
fonte
1
É importante notar que, usando a abordagem de formas reativas acima, você fica menos vinculado à IU e menos provável de ter problemas à medida que a estrutura da IU evolui
Joseph Simpson
Eu gostei disso, vou tentar.
userx
Só para notar aqui que se precisar .updateValueAndValiditydo controle não esqueça de passar { emitEvent: false }para evitar RangeError: Maximum call stack size exceeded. Por outro lado, obrigado pela dica (+1), me levou ao que eu precisava.
dcg
Devo cancelar a inscrição no ngOnDestroy se seguir a abordagem?
ohidano
Você sempre precisa limpar suas assinaturas para evitar vazamentos de memória e comportamento inesperado.
Joseph Simpson
7

Para:

1) seleção de esteira (selectionChange)="myFunction()"funciona em angular como:

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) A seleção simples de html (change)="myFunction()"funciona em angular como:

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

Para mim (selectionChange)e o sugerido (onSelectionChange)não funcionou e não estou usando ReactiveForms. O que acabei fazendo foi usar o (valueChange)evento como:

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

E isso funcionou para mim

Silverhash
fonte
Estou usando um formulário de modelo e trabalhei comigo usando o seguinte: <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

Eu tenho esse problema hoje com mat-option-group. A única coisa que me resolveu o problema é usar em outro evento fornecido de mat-select: valueChange

Eu coloquei aqui um pequeno código para entender: 

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

Versão Mat:

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

lingar
fonte