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

Answer 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.