在阵列上循环并以下拉方式显示-角度

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

但是，我收到了错误消息，比如“类型HtmleElement上不存在add”。

Answer 1

在这种情况下，您需要使用appendChild。而且，就我而言，一个选项的值应该是唯一的，并且只在该元素中使用一次，所以在这种情况下，您将覆盖它；它应该是那个人的唯一标识符，比如id。试试这个：

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;
     peepsSelect.appendChild(option);
  } 
}

编辑：我刚看到标签上有棱角。如果这实际上是角度代码，那么你使用的角度是错误的。

Answer 2

这不是Angular的真正做事方式。您应该使用双向数据绑定来完成此操作。此外，您可以使用ngValue来跟踪绑定到选项元素的值。与value绑定不同，ngValue可用于绑定到字符串值和对象。

<select [(ngModel)]="selected">
  <option *ngFor="let person of people" [ngValue]="person">{{person.name}}</option>
</select>

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

在你的部件上。ts，您需要定义以上属性

export class AppComponent  {
  selected;
  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"
    }
  ]
}

我在这里制作了一个演示。

Answer 3

尝试这样：

工作演示

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