所以 - 我有一组数据,如下所示:
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”。
最佳答案
尝试这样:
<强> Working Demo
<select id='peeps' name='people' [(ngModel)]="peepsSelect">
<option *ngFor="let item of data" [value]="item.name">
{{item.name}}
</option>
</select>
关于javascript - 循环数组并在下拉列表中显示 - Angular,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58572762/