Angular 6 Material mat-select change method ถูกลบออก


129

ใน Angular Material Design 6 วิธี (เปลี่ยน) ถูกลบออก ฉันไม่พบวิธีแทนที่วิธีการเปลี่ยนแปลงเพื่อรันโค้ดในส่วนประกอบเมื่อผู้ใช้เปลี่ยนการเลือกขอบคุณ!

คำตอบ:


350

เปลี่ยนจากchangeเป็นselectionChange.

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

ตอนนี้

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

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


26
ฉันเกลียดสิ่งนี้มาก เมื่อวานนี้ฉันคิดว่ามันเป็นวันที่ดีในการอัปเกรดเป็น Angular 6 อีกครั้งพวกเขาเปลี่ยนไวยากรณ์
Luis Lavieri

17
พวกเขาต้องการ(changeEventChange)เหตุการณ์ที่จะตรวจจับเมื่อเหตุการณ์เปลี่ยนแปลงเปลี่ยนแปลง
Stack Underflow

3
(selectionChange) ได้รับการอัปเดตเป็น (onSelectionChange) แล้ว
Debadatta

@ เดบาดัตตา - คุณเห็นสิ่งนี้ที่ใด? ฉันยังคงเห็นselectionChange material.angular.io/components/select/api
VtoCorleone

2
ความคิดเห็นทั้งหมดข้างต้นเพียง แต่เน้นเพิ่มเติมว่าเหตุใดจึงเหมาะสมที่จะยึดติดกับ appoach รูปแบบปฏิกิริยาตามคำตอบของฉันด้านล่างหากเป็นไปได้ จากบันทึกด้านข้างฉันไม่คิดว่าความคิดเห็นนั้นยุติธรรมมากเพราะพวก Angular Material ทำงานได้อย่างยอดเยี่ยมและเราได้รับมันฟรี
Joseph Simpson

24

หากคุณใช้รูปแบบปฏิกิริยาคุณสามารถรับฟังการเปลี่ยนแปลงในตัวควบคุมการเลือกเช่นนั้น ..

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

1
เป็นที่น่าสังเกตว่าการใช้รูปแบบปฏิกิริยาข้างต้นคุณจะเชื่อมโยงกับ UI น้อยลงและมีโอกาสน้อยที่จะมีปัญหาเนื่องจากเฟรมเวิร์ก UI นั้นพัฒนาไป
โจเซฟซิมป์สัน

ฉันชอบสิ่งนี้ฉันจะลองดู
userx

เพียงเพื่อให้ทราบที่นี่ว่าถ้าคุณต้องการที่จะ.updateValueAndValidityควบคุมไม่ลืมที่จะผ่านในการสั่งซื้อเพื่อหลีกเลี่ยง{ emitEvent: false } RangeError: Maximum call stack size exceededในทางกลับกันขอบคุณสำหรับคำใบ้ (+1) มันนำฉันไปสู่สิ่งที่ฉันต้องการ
dcg

ฉันควรยกเลิกการสมัครใน 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()">

และสิ่งนี้ได้ผลสำหรับฉัน


ฉันใช้แบบฟอร์มเทมเพลตและทำงานให้ฉันโดยใช้สิ่งต่อไปนี้: <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>

รุ่นเสื่อ:

"@ เชิงมุม / วัสดุ": "^ 6.4.7",

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.