Fixed <select> (change) not being fired

This commit is contained in:
nise.moe 2024-02-27 01:20:41 +01:00
parent aacf9980f8
commit c39dceb741
2 changed files with 11 additions and 3 deletions

View File

@ -20,13 +20,13 @@
<div *ngFor="let predicate of query.predicates; let i = index"> <div *ngFor="let predicate of query.predicates; let i = index">
<select style="max-width: 60%"> <select style="max-width: 60%" (change)="onFieldChange(predicate, $event)">
<option value="" disabled selected>---</option> <option value="" disabled selected>---</option>
<ng-container *ngFor="let category of ['user', 'beatmap', 'score', 'metrics']"> <ng-container *ngFor="let category of ['user', 'beatmap', 'score', 'metrics']">
<optgroup label="{{ category }}"> <optgroup label="{{ category }}">
<ng-container *ngFor="let field of fields"> <ng-container *ngFor="let field of fields">
<ng-container *ngIf="field.category === category"> <ng-container *ngIf="field.category === category">
<option [value]="field.name" [selected]="field.name === predicate.field?.name" (click)="onFieldChange(predicate, field)"> <option [value]="field.name" [selected]="field.name === predicate.field?.name">
{{ field.name }} {{ field.name }}
</option> </option>
</ng-container> </ng-container>

View File

@ -30,7 +30,15 @@ export class QueryComponent {
constructor() {} constructor() {}
onFieldChange(predicate: Predicate, selectedField: any): void { onFieldChange(predicate: Predicate, event: Event): void {
const selectElement = event.target as HTMLSelectElement;
const selectedValue = selectElement.value;
const selectedField = this.fields.find(field => field.name === selectedValue);
if(!selectedField) {
return;
}
predicate.field = selectedField; predicate.field = selectedField;
predicate.operator = selectedField.validOperators[0]; predicate.operator = selectedField.validOperators[0];
} }