Reset select selected value

Question

I've made a dynamic select when you select a value from the first select it sets the options of the second one.

Html:

<select clrSelect name="reviewerTypes" (change)="onChange(currentReviewerType)" 
[(ngModel)]="currentReviewerType">
    <option [value]="" selected disabled hidden>Choose value</option>
    <option *ngFor="let reviewType of reviewerTypes" [ngValue]="reviewType">
        {{reviewType.reviewType}}
    </option>
</select>
<select clrSelect name="options" [(ngModel)]="currentReviewer">
    <option value="" selected disabled hidden>Choose value</option>
    <option *ngFor="let reviewer of reviewers" [ngValue]="reviewer">                     
        {{reviewer.user}}
    </option>
</select>

TS:

onChange(selection){
    let reviewerId = selection;
    console.log(selection)
    this.dataService.GetReviewersByType(reviewerId.id).subscribe( response => 
        this.reviewers = response, error => console.log(error));
}

addReviewer(){
    console.log(this.currentReviewer)
    let reviewerToAdd = {reviewerType:this.currentReviewerType, 
        reviewer:this.currentReviewer}
    this.reviewersAdded.push(reviewerToAdd)
    console.log(this.reviewersAdded)
}

and it works just fine, every time I change the value of the first select, it changes the ones from the second one.

My problem is that the second one, when it changes, displays changes the values and it appears that the first one is selected but it keeps the value of the last one unless I pick another one manually.

Example

First one selects value="1" so the second one displays options={"a", "b", "c"} and lets assume i chose value="b" .

Then I change the value of the first one to value="2" then the second changes to options={"d", "e", "f"} but it immediately displays as I chose the value="d" at least visually that seems.

If that's the value that I want then I'll click the submit button, but when I do a console.log() with the value it shows me that the second one has the value="b" that I chose in the beginning.

If I want the value="d" I have to choose another one and then rechoose the that one.

Is there a way to reset the select so it selects the default value every time it changes is values? or do you have other ideas for this problem?

Answer 1

Ok the way I solved it was assigning the value in the onChange(selection)

onChange(selection){
    let reviewerId = selection;
    this.dataService.GetReviewersByType(reviewerId.id).subscribe( (response)=> {
      this.reviewers = response
      this.currentReviewer = response[0]  //////this is the line I added
    }, 
    error => console.log(error));
}

addReviewer(){
    console.log(this.currentReviewer)
    let reviewerToAdd = {reviewerType:this.currentReviewerType, 
        reviewer:this.currentReviewer}
    this.reviewersAdded.push(reviewerToAdd)
    console.log(this.reviewersAdded)
}

But I don't know if there is a better way