PrimeNG 手风琴选择事件

Question

我正在使用用 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 文件，其中包含我想在相应的 accordionTab 上打开的 p-accordion，该 accordionTab 获得了在搜索中选择的层（p-自动完成）。

<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 选项这确实可以完成工作，但对我来说，一切都是以更通用和动态的方式构建的，所以我必须找到另一个解决方案我很乐意提供任何帮助、配偶、推荐如果我不够清楚，我会很乐意详细说明:)

非常感谢所有帮助者！

马坦

Answer 1

好的，所以我将 [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] 为真时相关组。

PrimeNG 手风琴选择事件

PrimeNG accordion selected event

html

accordion

angular-material

primeng

angular