ใน Angular Material Design 6 วิธี (เปลี่ยน) ถูกลบออก ฉันไม่พบวิธีแทนที่วิธีการเปลี่ยนแปลงเพื่อรันโค้ดในส่วนประกอบเมื่อผู้ใช้เปลี่ยนการเลือกขอบคุณ!
ใน Angular Material Design 6 วิธี (เปลี่ยน) ถูกลบออก ฉันไม่พบวิธีแทนที่วิธีการเปลี่ยนแปลงเพื่อรันโค้ดในส่วนประกอบเมื่อผู้ใช้เปลี่ยนการเลือกขอบคุณ!
คำตอบ:
เปลี่ยนจากchange
เป็นselectionChange
.
<mat-select (change)="doSomething($event)">
ตอนนี้
<mat-select (selectionChange)="doSomething($event)">
(changeEventChange)
เหตุการณ์ที่จะตรวจจับเมื่อเหตุการณ์เปลี่ยนแปลงเปลี่ยนแปลง
selectionChange
material.angular.io/components/select/api
หากคุณใช้รูปแบบปฏิกิริยาคุณสามารถรับฟังการเปลี่ยนแปลงในตัวควบคุมการเลือกเช่นนั้น ..
this.form.get('mySelectControl').valueChanges.subscribe(value => { ... do stuff ... })
.updateValueAndValidity
ควบคุมไม่ลืมที่จะผ่านในการสั่งซื้อเพื่อหลีกเลี่ยง{ emitEvent: false }
RangeError: Maximum call stack size exceeded
ในทางกลับกันขอบคุณสำหรับคำใบ้ (+1) มันนำฉันไปสู่สิ่งที่ฉันต้องการ
สำหรับ:
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-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>
วันนี้ฉันมีปัญหากับ 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",