angular - primeng p-dropdown 是根据组名过滤的吗？

Question

我想使用 PrimeNG 页面上的代码按组名过滤。

<h3>Group</h3>
<p-dropdown [options]="groupedCars" [(ngModel)]="selectedCar3" placeholder="Select a Car" [group]="true" filter="true" filterBy="label,value">
    <ng-template let-group pTemplate="group">
        <img src="assets/showcase/images/demo/flag/{{group.value}}" style="width:20px;vertical-align:middle" />
        <span style="margin-left:.25em">{{group.label}}</span>
    </ng-template>
</p-dropdown>
<p>Selected Car: {{selectedCar3 || 'none'}}</p>

我使用了 groupedCars 变量 .ts 页面

selectedCar3: string;
this.groupedCars = [
            {
                label: 'Germany', value: 'germany.png', 
                items: [
                    {label: 'Audi', value: 'Audi'},
                    {label: 'BMW', value: 'BMW'},
                    {label: 'Mercedes', value: 'Mercedes'}
                ]
            },
            {
                label: 'USA', value: 'usa.png', 
                items: [
                    {label: 'Cadillac', value: 'Cadillac'},
                    {label: 'Ford', value: 'Ford'},
                    {label: 'GMC', value: 'GMC'}
                ]
            },
            {
                label: 'Japan', value: 'japan.png', 
                items: [
                    {label: 'Honda', value: 'Honda'},
                    {label: 'Mazda', value: 'Mazda'},
                    {label: 'Toyota', value: 'Toyota'}
                ]
            }
        ];

但是，我想按组标签和项目标签进行过滤。可能吗？

Answer 1

您可以为 filterBy 属性添加额外的值。

this.groupedCars = [
            {
                label: 'Germany', value: 'germany.png', 
                items: [
                    {label: 'Audi', value: 'Audi', additionalValue: 'germany.png'},
                    {label: 'BMW', value: 'BMW', additionalValue: 'germany.png'},
                    {label: 'Mercedes', value: 'Mercedes', additionalValue: 'germany.png'}
                ]
            }
        ];

你可以用forEach填充这个值，

this.groupedCars.items.forEach( item => {
    item.forEach( childValue => {
       childValue.additionalValue = item.value;
    })
} );

终于在 HTML 文件上；

filterBy="label,value,additionalValue"