[angular] Angular 6 재질 매트 선택 변경 방법 제거

Program / 글쓴이

Angular Material Design 6에서는 (변경) 방법이 제거되었습니다. 사용자가 선택을 변경할 때 구성 요소에서 코드를 실행하기 위해 변경 메서드를 대체하는 방법을 찾을 수 없습니다. 감사합니다!

답변

에서에서 change로 변경되었습니다 selectionChange. 

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

지금

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

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

답변

Reactive 양식을 사용하는 경우 선택 컨트롤의 변경 사항을 수신 할 수 있습니다. 

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

답변

에 대한:

1) mat-select (selectionChange)="myFunction()"는 다음과 같이 각도로 작동합니다.

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) 간단한 html 선택 (change)="myFunction()"은 다음과 같이 각도로 작동합니다.

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
}

답변

나를 (selectionChange)위해 제안 된 (onSelectionChange)것이 작동하지 않았고 ReactiveForms. 내가 한 일은 (valueChange)다음과 같은 이벤트를 사용하는 것입니다.

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

그리고 이것은 나를 위해 일했습니다.

답변

나는 오늘 mat-option-group 에서이 문제가 있습니다. 문제를 해결 한 것은 mat-select의 다른 제공된 이벤트에서 사용하는 것입니다 :
valueChange

이해를 돕기 위해 여기에 약간의 코드를 넣었습니다. 

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

매트 버전 :

“@ angular / material”: “^ 6.4.7”,

답변