Dropdown list does not populate with API data in Angular - object

Question

I know that similar questions have been asked, but I've found none with a good answer. I want to create a select list in an Angular form, where the value for each option is an object. I have no backend error and i have no frontend error.
Backend: Spring boot
,Frontend : Angular 9
here is what i've got in option value = [object,object]:
here is what i've got in the browser
here is the Model
export class Societe {
id: number;
nomSociete: String;
registreCommercial: String;
dateConstruction: Date;
formeJuridique: String;
telephone: Number;
fax: Number;
siteWeb: String;
secteur : Secteur;
}
here is the TypeScript component :
export class CreateSocieteComponent implements OnInit {
form: any = {secteur: Secteur};
id: number;
societe: Societe;
secteur: Secteur;
constructor(private tokenStorageService: TokenStorageService,private societeService: SocieteService,
private secteurService: SecteurService , private route: ActivatedRoute, private router: Router) { }
getSelectedSecteur(): void{
this.secteurService.listerSecteur()
.subscribe(secteur => this.secteur= secteur);
}
//methods to get dropdown values
dropDownProjectName: string = '';
selectedHandlerProjectName(event : any)
{
if(event.target.value != 'default') { this.dropDownProjectName = event.target.value;}
else {this.dropDownProjectName = null;}
}
ngOnInit(): void {
this.getSelectedSecteur();
}
here is HTML code :
<div class="dropdown ml-auto">
<select class="btn btn-secondary dropdown-toggle" >
<option value="default">Select Secteur</option>
<option *ngFor="let Secteur of secteur" [value]="secteur">{{secteur}}</option>
</select>
</div>
<button type="submit" class="btn btn-success">Submit</button>
i didn't understand why i'm getting select option [object,object] instead of list of secteur .
ANY HELP !!?

Answer 1

try...
<option *ngFor="let sec of secteur; let i = index" [value]="secteur[i].id">
{{secteur[i].name}}
</option>