Angular 中的 API 数据未填充下拉列表

Question

我知道有人问过类似的问题，但我发现 none 的答案很好。 我想以 Angular 形式创建一个 select 列表，其中每个选项的值都是一个对象。我没有后端错误，也没有前端错误。后端：Spring 启动 ,前端：Angular 9

这是我在选项 value = [object,object]:

中得到的

here is what i've got in the browser

这里是模型

export class Societe {

id: number;
nomSociete: String;
registreCommercial: String;
dateConstruction: Date;
formeJuridique: String;
telephone: Number;
fax: Number;
siteWeb: String;
secteur : Secteur;
}

这里是 TypeScript 组件 :

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();

  }

这里是 HTML 代码 :

  <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>

我不明白为什么我得到 select 选项 [object,object] 而不是 list of secteur 。任何帮助!!?

Answer 1

尝试...

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

Angular 中的 API 数据未填充下拉列表

Dropdown list does not populate with API data in Angular

data-binding

foreign-keys

object

angular8