Как отфильтровать p-orderList с помощью p-раскрывающегося списка в Angular - PullRequest
Новая
       13

Как отфильтровать p-orderList с помощью p-раскрывающегося списка в Angular

1 голос
/ 17 июня 2019

Я новичок в angular, и я изо всех сил пытался заставить разные части работать вместе.У меня есть p-orderList от PrimeNG, который отображает список объектов 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);
}

1 Ответ

0 голосов
/ 17 июня 2019

Вам нужно указать свой 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>* 1010. *

...