我是Angular的新手,我一直在努力让不同的部分一起工作。 我有一个来自PrimeNG的p-orderList,它显示JSON对象列表和一个p-dropDown,它从列出的对象中读取属性并显示所有可能的选项。 我需要过滤 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>
TS
onCategoryChange(selectedType){
var results = this.devices.filter(element => {return element.object_type === selectedType});
console.log(results);
}
您需要将 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>
设备列表的位置,而是使用filteredDevices,您可以在为<p-orderList>
分配设备的位置