I have created a simple HTML code to populate array elements in a dropdown list, with the default value being fetched from an HTTP service during the ngOnInit lifecycle hook. However, I am encountering an issue where the default value is displayed as empty in the dropdown.
Here is my HTML:
<select class="form-control" name="chocolate"
[(ngModel)]="selectedChocolateId">
<option *ngFor="let chocolate of chocolates" [ngValue]="chocolate.id">
{{chocolate.name}}
</option>
</select>
And here is my TypeScript code:
public selectedChocolateId:number;
ngOnInit() {
this._chocolateService.GetChocolateId().subscribe(data => {
this.selectedChocolateId = data;
})
}
public chocolates = [
{ id:1, "name":"Diary Milk"},
{ id:2, "name":"Five star"}
];
When I execute the code, I notice that the default value in the dropdown appears empty. However, upon logging the fetched value from the service, I can see that it is being retrieved successfully. Any assistance would be greatly appreciated!