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

Question

我知道有人问过类似的问题，但我没有找到一个好的答案。我想在 Angular 表单中创建一个选择列表，其中每个选项的值都是一个 object。我没有后端错误，也没有前端错误。后端：Spring Boot，前端：Angular 9

这是我在选项 value = [object,object] 中得到的：

这是我在浏览器中得到的

这是模型

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>

我不明白为什么我得到选择选项 [object,object] 而不是 secteur 列表。任何帮助！？

标签： objectdata-bindingforeign-keysangular8

Answer 1

尝试...

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