PrimeNG MultiSelect：如何选择整个组

【问题标题】：PrimeNG MultiSelect: How to select whole groupPrimeNG MultiSelect：如何选择整个组
【发布时间】：2021-07-09 14:08:13
【问题描述】：

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

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

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

它给了我这个：

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

【问题讨论】：

标签： angular typescript primeng multi-select

【解决方案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}

【讨论】：