CODEWITHSUNDEEP
arraysangulardropdown
Fr34k
Fr34k

Reputation: 1

Display dropdown data in angular 2

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

Upvotes: 0

Views: 43

Answers (1)

German Quinteros
German Quinteros

Reputation: 1930

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.

Upvotes: 1

Related Questions