Display dropdown data in angular 2

Question

currently I have the problem to not be able to display some data in a dropdown. I want to create two different components in which the dropdowns could be. In one of them the dropdown is displayed properly, in the other I'm not able to make it running.

Here a small code snippet - I hope this is enough.

Working example: component.html

<select class="test-table__input-filter table__input-filter" [formControl]="filter.control">
            <option *ngFor="let entity of (entities | dropdownData: filter.name) | async">{{entity.name}}</option>
</select>

In the ts I have following line in ngOnInit:

this.entities.subscribe(val => console.log(val));

Which gives the following output in console:

{displayRole: Array(4)}
displayRole: Array(4)
0: {id: 1, name: "TEST1", title: "TEST1", priorityError: 4, priorityOffline: 3, …}
1: {id: 2, name: "TEST2", title: "TEST2", priorityError: 4, priorityOffline: 4, …}
2: {id: 3, name: "TEST3", title: "TEST3", priorityError: 4, priorityOffline: 4, …}
3: {id: 4, name: "TEST4", title: "TEST4", priorityError: 3, priorityOffline: 1, …}
length: 4
__proto__: Array(0)
__proto__: Object

Not working example:

<select class="test-form__field form__field form__field--error" [name]="field.name" [formControlName]="field.name">
    <option *ngFor="let item of (field.data | dropdownData : field.name) | async">{{item.name}}</option>
</select>

In the ts I have following line in ngOnInit:

field.data.subscribe(val => console.log(val));

Which prints the following output in console:

{displayRole: Array(4)}
displayRole: Array(4)
0: {id: 1, name: "TEST1", title: "TEST1", priorityError: 4, priorityOffline: 3, …}
1: {id: 2, name: "TEST2", title: "TEST2", priorityError: 4, priorityOffline: 4, …}
2: {id: 3, name: "TEST3", title: "TEST3", priorityError: 4, priorityOffline: 4, …}
3: {id: 4, name: "TEST4", title: "TEST4", priorityError: 3, priorityOffline: 1, …}
length: 4
__proto__: Array(0)
__proto__: Object

So the console prints the same result twice. Hope you can help me.

Appreciate it!

Fr34k

How do the not working component get the field? Is it an input? Could you provide a minimum reproduction on stackblitz? — julianobrasil
– julianobrasil, Commented Apr 16, 2020 at 20:22

German Quinteros · Accepted Answer · 2020-04-17 00:58:32Z

1

Your error is that you are chaining wrong the pipes.

Check the following resource:

https://angular.io/guide/pipes#chaining-pipes

You should apply first: async and then dropdownData: filter.name

Your code should be like this:

component.html

<select class="test-table__input-filter table__input-filter" [formControl]="filter.control">
    <option *ngFor="let entity of entities | async | dropdownData: filter.name">{{entity.name}}</option>
</select>

another component

<select class="test-form__field form__field form__field--error" [name]="field.name" [formControlName]="field.name">
    <option *ngFor="let item of field.data | async | dropdownData : field.name">{{item.name}}</option>
</select>

Check if works with that change.

edited Apr 17, 2020 at 0:58

answered Apr 16, 2020 at 20:33

German Quinteros

1,9401 gold badge12 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Display dropdown data in angular 2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related