javascript - 循环数组并在下拉列表中显示 - Angular

Question

所以 - 我有一组数据，如下所示:

people = [
    {
      name: "Bob",
      age: "27",
      occupation: "Painter"
    },
    {
      name: "Barry",
      age: "35",
      occupation: "Shop Assistant"
    },
    {
      name: "Marvin",
      age: "42",
      occupation: "Mechanic"
    },
    {
      name: "Arthur dent",
      age: "27",
      occupation: "Human"
    },

然后我的 html 中也有一个下拉菜单，如下所示 -

<select id='peeps' name='people'>
    <option></option>    
</select>

<div class='show-info'></div>

这一切都在一个组件中，我想做的是循环人员数组，用他们的名字填充选项，当您在下拉列表中选择该人时，他们的信息将显示在 div 中。我试图开始这个工作，但遇到了一些问题。

我开始这样做 -

peepsSelect = document.getElementById("peeps") as HTMLElement;
populationDropdown() {
  for(var i = 0; i < this.people.length; i++) {
    var option = document.createElement("option");
    option.text = this.people[i].name;
    option.value = this.people[i].name;
    option.value = this.people[i].age;
    option.value = this.people[i].occupation;
    this.peepsSelect.add(option);
 } 
}

但是我收到了错误消息，例如“add does not exit on type htmlelement”。

Answer 1

尝试这样:

<强> Working Demo

<select id='peeps' name='people' [(ngModel)]="peepsSelect">
    <option *ngFor="let item of data" [value]="item.name">
      {{item.name}}
    </option>    
</select>