Reputation:
So - I have a set of data like so:
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"
},
I then also have a drop down in my html like so -
<select id='peeps' name='people'>
<option></option>
</select>
<div class='show-info'></div>
This is all in one component and what I am trying to do is loop over the people array, populate the options with their names and when you select that person in the drop down, their information gets displayed in the div. I have tried to start this off but I am running into a few issues.
I started doing this -
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);
}
}
However I was getting error messages such as 'add does not exist on type htmlelement.
Upvotes: 2
Views: 28664
Reputation: 42526
That is not really the Angular way of doing things. You should use two-way data binding to get this done. In addition, you can use ngValue to track the value binded to the option element. Unlike the value
binding, ngValue
can be used to bind to both string values and objects.
<select [(ngModel)]="selected">
<option *ngFor="let person of people" [ngValue]="person">{{person.name}}</option>
</select>
<div class='show-info'></div>
And on your component.ts, you will need to define to above properties
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"
}
]
}
I have created a demo over here.
Upvotes: 2
Reputation: 22213
Try like this:
<select id='peeps' name='people' [(ngModel)]="peepsSelect">
<option *ngFor="let item of data" [value]="item.name">
{{item.name}}
</option>
</select>
Upvotes: 6
Reputation: 138
According to the tag of your question "angular" you should try using *ngFor together with 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>
Upvotes: 0
Reputation: 1485
You would need to use appendChild in that case instead. Also, the value of an option is supposed to be unique and only used once in that element as far as I am concerned, so you would be overwriting it in that case; it should be a unique identificator for that person, like an id. Try this instead:
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: I just saw Angular in the tags. If this is actually Angular code, you are using Angular wrong.
Upvotes: 0