One issue I am facing is to retrieve the default value in the select dropdown
Another problem arises when I select an option from the first dropdown menu, the data appears in the second dropdown. However, upon changing the selection in the first dropdown again, the data disappears and requires a reload to reappear.
Here is my HTML code:
<div class="form-group">
<label for="Morceau">Artiste <span style="color: red;">*</span> </label>
<select #mySelect (change)="onMakeChange( mySelect.value)" [(ngModel)]="suggestion.artiste_id"
name="artiste_id" type="text" class="form-control z-depth-1" id="Morceau" style=" border-style: solid;
border-width: 3px; border-color:#000">
<option value=""></option>
<option *ngFor="let artiste of artistes" value="{{artiste?._id}}">{{artiste?.artiste_name}}</option>
</select>
</div>
<div class="form-group ">
<label for="Artiste">Morceau <span style="color: red;">*</span> </label>
<select type="text" class="form-control z-depth-1" id="Artiste" style=" border-style: solid;
border-width: 3px; border-color:#000" [(ngModel)]="suggestion.lyrics_id" name="lyrics_id">
<option value=""></option>
<option *ngFor="let lyrics of lyrics" value="{{lyrics?._id}}">{{lyrics?.titleOfLyrics}}</option>
</select>
</div>
**my TypeScript code is :**
artistes: any[] = [];
lyrics: any[] = [];
suggestion: any = {
artiste_id: "",
lyrics_id: "",
email: "",
punchline: "",
};
getAllArtiste() {
this.artisteSRV.getAll().subscribe((data: any) => {
this.artistes = data;
console.log("artistes", data);
});
}
getAllLyrics() {
this.lyricsSRV.getAll().subscribe((data: any) => {
this.lyrics = data;
console.log("lyrics", data);
});
}
onMakeChange($event) {
if (this.suggestion.artiste_id)
var selectedLyrics = this.lyrics.filter(
(art) => art.artiste._id == this.suggestion.artiste_id
);
this.lyrics = selectedLyrics;
delete this.suggestion.lyrics_id;
}