Tiene dos cuadros de selección, si seleccionamos el elemento en el primer cuadro de selección y seleccionamos una opción en el segundo cuadro de selección. Y si seleccionamos otra opción en el primer cuadro de selección, debemos restablecer el valor predeterminado como 'Seleccionar hora'. Intenté usar el código a continuación, puedo seleccionar pero no puedo restablecer para volver al valor predeterminado, aún seleccionando el valor seleccionado previamente.
public validTime = ['8', '9', '10', '11', '12', '1', '2', '3', '4']; public validTimeOptions = this.validTime; output = "...."; selectedFood: string; foods = [ {value: 'product10', viewValue: 'Monday'}, {value: 'product20', viewValue: 'Tuesday'}, {value: 'product30', viewValue: 'Wednesday'}, {value: 'product40', viewValue: 'Thursday'}, {value: 'product40', viewValue: 'Friday'}, ]; onFoodSelection() { this.output = this.selectedFood; this.validTime = this.validTime; }HTML:
<select placeholder="Favorite food" [(ngModel)]="selectedFood" (ngModelChange)="onFoodSelection()"> <option *ngFor="let food of foods" [value]="food.value"> {{ food.viewValue }} </option> </select> <select id="suspensionTime" class="kite-form-control" (click)="changeTimeUpdate()"> <option [ngValue]="null" selected disabled>Select Time</option> <option *ngFor="let time of validTimeOptions" [ngValue]="time">{{ time }}</option> </select>Debe vincular suspensionTime select con un ngModel para actualizar el valor en el cambio de día.
// app.component.ts selectedTime: string; onFoodSelection() { this.output = this.selectedFood; this.validTime = this.validTime; this.selectedTime = null; } // app.component.html <select id="suspensionTime" class="kite-form-control" (click)="changeTimeUpdate()" [(ngModel)]="selectedTime">Mira este Stackblitz .