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

Posted 2023-03-13

【中文标题】循环遍历数组并在下拉列表中显示 - Angular

【英文标题】：Looping over an array and displaying in dropdown - Angular

【发布时间】：2020-02-22 15:31:34

【问题描述】：

所以 - 我有一组像这样的数据：

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.

【问题讨论】：

可能与***.com/questions/12989741/…重复

这不是您在 Angular 中应该这样做的方式（没有 getElementById 等）。例如：***.com/questions/35945001/…

【参考方案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 错误。

【参考方案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 创建了一个演示。

【讨论】：

我们如何绑定 [ 76: name: "Bob", age: "27", 职业: "Painter" , 87: name: "Barry", age: "35" , 职业: "店员" , ];

【参考方案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>

【讨论】：

没有意义将它放在可运行的代码块中，因为它无法识别角度代码。为任何演示使用 stackblitz 会话。

【参考方案4】：

试试这样：

Working Demo

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

【讨论】：

将[value]="item.name" 添加到这个已经existing answer 有什么好处？严肃的问题...

如果他想绑定一个不同于显示的值。比如id:1,name:'Tom'需要显示name，需要绑定id，此时[value]很重要