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

129

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

angular angular6

346

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

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

지금

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

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

— VtoCorleone
소스

26

나는 이것을 너무 싫어. 어제 저는 Angular 6으로 업그레이드하는 것이 멋진 날이라고 생각했습니다. 다시 한번 그들은 구문을 변경했습니다.

— Luis Lavieri

17

그들은 필요한 (changeEventChange)변경 이벤트가 변경 될 때 감지하는 이벤트.

— 스택 언더 플로

3

(selectionChange)가 이제 (onSelectionChange)로 업데이트되었습니다.

— Debadatta 2019

@Debadatta-이걸 어디서 봤어? 여전히 selectionChange material.angular.io/components/select/api

— VtoCorleone

2

위의 모든 의견은 가능한 경우 아래의 답변에 따라 반응 형 양식 접근 방식을 고수하는 것이 왜 합리적인지 강조합니다. 참고로, 저는 Angular Material 녀석들이 놀라운 일을했고 우리는 그것을 무료로 얻었 기 때문에 코멘트가 매우 공정하다고 생각하지 않습니다.

— Joseph Simpson

24

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

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

— 조셉 심슨
소스

1

위의 반응 형 접근 방식을 사용하면 UI 프레임 워크가 발전함에 따라 UI에 덜 묶여 있고 문제가 발생할 가능성이 적다는 점에 주목할 가치가 있습니다.

— Joseph Simpson

나는 이것을 좋아했다, 나는 이것을 시도 할 것이다.

— userx

.updateValueAndValidity제어가 필요한 경우 { emitEvent: false }를 피하기 위해 통과하는 것을 잊지 마십시오 RangeError: Maximum call stack size exceeded. 다른 한편으로 힌트 (+1) 덕분에 내가 필요한 것을 얻었습니다.

— dcg 19.11.07

접근 방식을 따를 경우 ngOnDestroy에서 구독을 취소해야합니까?

— ohidano

메모리 누수 및 예기치 않은 동작을 방지하려면 항상 구독을 정리해야합니다.

— Joseph Simpson

7

에 대한:

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
}

— 카일라스
소스

3

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

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

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

— Silverhash
소스

저는 템플릿 양식을 사용하고 있으며 다음을 사용하여 작업했습니다.

<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

나는 오늘 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",

— Lingar
소스