Показать выпадающие данные в angular 2

Question

В настоящее время у меня проблема с невозможностью отображения некоторых данных в раскрывающемся списке. Я хочу создать два разных компонента, в которых могут быть выпадающие списки. В одном из них раскрывающийся список отображается правильно, в другом я не могу его запустить.

Вот небольшой фрагмент кода - надеюсь, этого достаточно.

Рабочий пример: 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>

В ts у меня есть следующая строка в ngOnInit:

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

, которая дает следующий вывод в консоли:

{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

Не работающий пример:

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

В ts у меня есть следующая строка в ngOnInit:

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

, которая печатает следующий вывод в консоли:

{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

Итак консоль печатает один и тот же результат дважды. Надеюсь, вы сможете мне помочь.

Цените это!

Fr34k

Answer 1

Ваша ошибка в том, что вы неправильно соединяете трубы.

Проверьте следующий ресурс:

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

Вы должны сначала примените: async, а затем dropdownData: filter.name

Ваш код должен быть таким:

компонент. 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>

другой компонент

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

Проверьте, работает ли с этим изменением.