PrimeNG 手风琴选定事件

如何解决PrimeNG 手风琴选定事件

我正在使用我的项目，该项目是用 primeNG 编写的 Angular 11。其中一个组件具有 p-autoComplete 搜索字段这会激活搜索功能 (onSelect) 事件。

我希望当函数发生时，在另一个包含 p-accordion 的组件中我将打开包含找到的字段的选项卡，在我们的例子中是层代码：

这里可以看到第一个组件的html的p-autoComplete字段

<p-autoComplete dir="rtl" formControlName="layeRSSearch" type="text" placeholder="חיפוש שכבה"
            [class.invalid]="inputForm?.controls?.layeRSSearch?.invalid === true" [(ngModel)]="searchText"
            [suggestions]="layersResults" (onSelect)="searchLayer($event)"
            (completeMethod)="getLayerAutoComplete($event)">
        </p-autoComplete>

这里可以看到搜索的功能

searchLayer(event) {
var layer = this.layeRSService.getLayerByCaption(event);
if (!layer.visible) {
  this.layeRSService.setLayersOn(layer);
  
}

}

在这里您可以看到我们的第二个组件的 html 文件，其中包含 p-accordion，我想在相应的 AccordionTab 上打开该 p-accordion，以获得在搜索中选择的层 (p-autoComplete)。

<div class="scrolller">
<p-accordion>

    <p-accordionTab *ngFor="let group of layeRSService.tamarGroups" [selected]="false">
        <ng-template pTemplate="header">
            <span class="groups">{{group}}</span>
            <span *ngIf="getGroupStatus(group)"
                class="layerCount">{{layeRSService.selectedActiveLayers[group].length}}</span>

        </ng-template>

        <div class="tiny-scrolller">
            <div *ngFor="let layer of tamarGroups[group]" class="p-field-checkBox">

                <p-checkBox name="group2" [value]="layer" [(ngModel)]="layeRSService.selectedActiveLayers[group]"
                    [inputId]="layer.key" (onChange)="layeRSService.setLayersOnOff(layer)"></p-checkBox>
                <label [ngClass]="{'grayBtnLayer':getStatus(layer)}" [for]="layer.key">{{layer.caption}}</label>
                <span *ngIf="layer.maxScale>0 ||layer.minScale >0 " class="hideInfo">
                    השכבה פעילה בקנה מידה מ - {{layer.maxScale}} עד {{layer.minScale}}
                </span>

            </div>
        </div>
    </p-accordionTab>
</p-accordion>

有一些希伯来语内容哈哈，尽量忽略它:) 无论如何，我尝试查看如何找到该事件并仅找到 [selected] = true 选项这确实可以完成工作，但对我而言，一切都以更通用和动态的方式构建，因此我必须找到另一个解决方案我很乐意提供任何帮助、配偶、推荐如果我不够清楚，我很乐意详细说明:)

非常感谢所有的帮助者！

马坦

解决方法

好的，所以我将 [selected] = "false" 更改为 [selected]="layersService.isGroupSelected[group]" “layersService”基本上是一个常规服务（附代码）其中包含名为 isGroupSelected

的变量

export class LayersService {
  isGroupSelected: any = {};
   
   constructor etc..
}

然后我只是添加了一个 for 循环来查找 searchLayer(event) 函数上的相关组：

searchLayer(event) {
   var layer = this.layersService.getLayerByCaption(event);
   var group = this.layersService.getGroupByCaption(layer.layerGroup);
   //Just to make sure that isGroupSelected is empty
   this.layersService.isGroupSelected = [];

   for (let index = 0; index < this.layersService.tamarGroups.length; index++) {
     if (this.layersService.tamarGroups[index] == group) {
       this.layersService.isGroupSelected[group] = true;
      }

     }
   if (!layer.visible) {
     this.layersService.setLayersOn(layer);  
   }
}

现在 p-accordionTab [selected] 相关组仅当 layersService.isGroupSelected[group] 为真时。