如何在Angular中使用p-dropdown过滤p-orderList答案

【问题标题】：How to filter a p-orderList with a p-dropdown in Angular如何在Angular中使用p-dropdown过滤p-orderList
【发布时间】：2019-06-17 23:52:25
【问题描述】：

我是 Angular 的新手，我一直在努力让不同的部分一起工作。我有一个来自 PrimeNG 的 p-orderList，它显示 JSON 对象列表和一个 p-dropDown，它从listedObjects 中读取一个属性并显示所有可能的选项。我需要过滤 orderList 以便在未选择任何内容时显示所有可能的选项，或者过滤它以仅显示所选类型。

我已填充下拉列表并在更改时触发。我还可以使用内置函数的打字稿进行过滤。我不知道该怎么做是将它附加回orderList。任何帮助是极大的赞赏。

HTML

<p-dropdown [options]="getExistingTypes()" [(ngModel)]="selectedType" [style]="{'width':'83%'}" (onChange)="onCategoryChange(selectedType)"></p-dropdown>
<div style="display: flex; justify-content: center; flex-direction: row; text-align: center;">
</div>
<p-orderList [value]="devices" [metaKeySelection]="false" [listStyle]="{'height':'400px'}" header="Devices" controlsPosition="right" dragdrop="false" [(selection)]="selected" [responsive]="true">
    <ng-template let-device pTemplate="item">
        <div style="font-size: x-large">
            {{device['object_name'] | noquotes}}
        </div>
        <div>
            <label>mac: </label>{{device.deviceData.MAC}}
        </div>
        <div>
            <label>id: </label>{{device['object_identifier']}}
        </div>
        <div>
            <label>type: </label>{{device['object_type']}}
        </div>
    </ng-template>
</p-orderList>

onCategoryChange(selectedType){
    var results = this.devices.filter(element => {return element.object_type === selectedType});
    console.log(results);
}

【问题讨论】：

标签： angular filtering dropdown primeng

【解决方案1】：

您需要将您的 p-orderList 指向过滤后的结果，因此您必须将结果设为组件上的公共变量：

public filteredDevices: any; //make this an Array<x> of whatever your devices are, sames as this.devices
...

onCategoryChange(selectedType){
    filteredDevices = this.devices.filter(element => {return element.object_type === selectedType});
    console.log(results);
}

HTML 基本相同，只是使用了过滤设备而不是设备。

<p-orderList [value]="filteredDevices" [metaKeySelection]="false" [listStyle]="{'height':'400px'}" header="Devices" controlsPosition="right" dragdrop="false" [(selection)]="selected" [responsive]="true">
    <ng-template let-device pTemplate="item">
        <div style="font-size: x-large">
            {{device['object_name'] | noquotes}}
        </div>
        <div>
            <label>mac: </label>{{device.deviceData.MAC}}
        </div>
        <div>
            <label>id: </label>{{device['object_identifier']}}
        </div>
        <div>
            <label>type: </label>{{device['object_type']}}
        </div>
    </ng-template>
</p-orderList>

您可能需要更改 [value]="filteredDevices" 的更多内容，我不肯定这是为 <p-orderList> 分配设备列表的位置，但在您为 <p-orderList> 分配设备的位置使用过滤设备代替p>

【讨论】：