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!

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


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 ... })

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
}

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


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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.