PrimeNG MultiSelect：如何 select 整个组

Question

我正在使用 primeNG 多组分组 select，我想知道是否可以通过单击组本身来 select 组中的所有项目？

到目前为止，这是我的代码：

<p-multiSelect [options]="items" [group]="true" [(ngModel)]="selectedItems" optionLabel="name" optionValue="id" optionGroupLabel="label" optionGroupChildren="subItems" (onChange)="changed()"></p-multiSelect>

它给了我这个：

但是，我希望在“德国”之前有一个复选框，我可以通过单击它来select“德国”的所有城市。有什么想法吗？

Answer 1

假设您使用与 the docs.

相同的实现

<p-multiSelect [options]="groupedCities" [group]="true" [(ngModel)]="selectedCities" defaultLabel="Select a City" scrollHeight="250px" display="chip">
<ng-template let-group pTemplate="group">
    <div class="p-d-flex p-ai-center">
        <img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'p-mr-2 flag flag-' + group.value" style="width: 20px"/>
        <span>{{group.label}}</span>
    </div>
</ng-template>

您应该能够在 div 上放置一个 click method 包含跨度

<div class="p-d-flex p-ai-center" (click)="selectedCities = group.items">

应该可以，否则您可能需要将其包装在一个函数中

<div class="p-d-flex p-ai-center" (click)="setSelection(group.items)">

ts:

setSelection(items) => {this.selectedCities = items}

PrimeNG MultiSelect：如何 select 整个组

PrimeNG MultiSelect: How to select whole group

angular

typescript

primeng

multi-select