循环遍历数组并在下拉列表中显示 - 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 exist on type htmlelement.

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

edit：我刚刚在标签中看到了 Angular。如果这实际上是 Angular 代码，那么您使用的 Angular 错误。

Answer 2

这并不是真正的 Angular 做事方式。您应该使用two-way data binding 来完成这项工作。此外，您可以使用ngValue 来跟踪绑定到选项元素的值。与value 绑定不同，ngValue 可用于绑定字符串值和对象。

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

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

并且在您的 component.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"
    }
  ]
}

我已经通过here 创建了一个演示。

Answer 3

根据您的问题标签“角度”，您应该尝试将 *ngFor 与 two way binding 一起使用：

<select [(ngModel)]="selected_peeps">
  <option *ngFor="let people of peoples"
    [attr.data-age]="people.age"
    [attr.data-occupation]="people.occupation">
    {{ people.name }}
  </option>    
</select>

Answer 4

试试这样：

Working Demo

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