angular - PrimeNG MultiSelect：如何选择整个组

Question

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

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

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

它给了我这个：

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

标签： angulartypescriptprimengmulti-select

Answer 1

假设您使用与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 方法

<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}