Đã loại bỏ phương pháp thay đổi mat-chọn vật liệu Angular 6

129

Trong Angular Material Design 6, phương thức (change) đã bị loại bỏ. Tôi không thể tìm thấy cách thay thế phương thức thay đổi để thực thi mã trong thành phần khi người dùng thay đổi lựa chọn Cảm ơn!

angular angular6

— Fernando Lacoumette
nguồn

347

Sự thay đổi nó từ changethành selectionChange.

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

Hiện tại là

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

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

— VtoCorleone
nguồn

26

Tôi ghét điều này rất nhiều. Hôm qua tôi nghĩ rằng đó là một ngày tuyệt vời để nâng cấp lên Angular 6. Một lần nữa, họ đã thay đổi cú pháp.

— Luis Lavieri 17/07/18

17

Họ cần một (changeEventChange)sự kiện để phát hiện khi sự kiện thay đổi thay đổi.

— Stack Underflow

3

(selectChange) hiện đã được cập nhật thành (onSelectionChange).

— Debadatta 14/02/19

@Debadatta - Bạn đã thấy cái này ở đâu? Tôi vẫn thấy selectionChange material.angular.io/components/select/api

— VtoCorleone

2

Tất cả các nhận xét ở trên chỉ làm nổi bật thêm lý do tại sao nên tuân theo cách ứng dụng biểu mẫu phản ứng, theo câu trả lời của tôi bên dưới, nếu có thể. Một lưu ý nhỏ, tôi không nghĩ rằng các nhận xét là rất công bằng vì những người của Angular Material đã làm một công việc tuyệt vời và chúng tôi nhận được nó miễn phí.

— Joseph Simpson

24

Nếu bạn đang sử dụng Biểu mẫu phản ứng, bạn có thể nghe các thay đổi đối với điều khiển chọn như vậy ..

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

— Joseph Simpson
nguồn

1

Nó đáng chú ý rằng việc sử dụng các hình thức trên phản ứng tiếp cận bạn ít gắn liền với giao diện người dùng và ít có khả năng có vấn đề như tiến hóa khung UI

— Joseph Simpson

Tôi thích cái này, tôi sẽ thử cái này.

— userx

Chỉ cần lưu ý ở đây rằng nếu bạn cần .updateValueAndValiditykiểm soát, đừng quên vượt qua { emitEvent: false }để tránh RangeError: Maximum call stack size exceeded. Mặt khác, cảm ơn vì gợi ý (+1), nó dẫn tôi đến những gì tôi cần.

— dcg

Tôi có nên hủy đăng ký trong ngOnDestroy nếu tôi làm theo cách này không?

— ohidano

Bạn luôn cần dọn dẹp đăng ký của mình để tránh rò rỉ bộ nhớ và hành vi không mong muốn.

— Joseph Simpson

7

Đối với:

1) mat-select (selectionChange)="myFunction()"hoạt động ở dạng góc như:

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) Lựa chọn html đơn giản (change)="myFunction()"hoạt động ở dạng góc như:

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
nguồn

3

Đối với tôi (selectionChange)và đề xuất (onSelectionChange)không hoạt động và tôi không sử dụng ReactiveForms. Những gì tôi cuối cùng đã làm là sử dụng (valueChange)sự kiện như:

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

Và điều này đã làm việc cho tôi

— silverhash
nguồn

Tôi đang sử dụng biểu mẫu mẫu và đã làm việc với tôi bằng cách sử dụng như sau:

<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

Tôi gặp sự cố này hôm nay với mat-option-group. Điều giúp tôi giải quyết vấn đề đang sử dụng trong sự kiện được cung cấp khác của mat-select: valueChange

Tôi đặt ở đây một đoạn mã nhỏ để bạn hiểu:

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

Phiên bản Mat:

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

— lingar
nguồn