以角度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

您的代码应像这样：

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>

另一个组件

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

检查该更改是否有效。