Angular中CoreUI动态c-accordion项的点击事件处理与组件访问

模板内直接访问的解决方案 #

你不需要用动态命名的模板引用（比如#item{{i}}），因为*ngFor的每个迭代都会创建独立的模板作用域，直接给每个<c-accordion-item>定义一个固定的模板变量名即可，比如#currentItem，在循环内部的模板里直接引用这个变量就能访问当前项的toggleItem()方法和visible属性。

修改后的核心代码如下：

<c-accordion [alwaysOpen]="true" formArrayName="attributes">
    <!-- 用固定模板变量名#currentItem，不需要动态拼接索引 -->
    <c-accordion-item #currentItem="cAccordionItem" [visible]="true" 
        *ngFor="let attribute of attributes.controls; index as i" [formGroupName]="i">
      <ng-template cTemplateId="accordionHeaderTemplate">
        <!-- 直接引用currentItem操作当前项 -->
        <button (click)="currentItem.toggleItem()" [collapsed]="!currentItem.visible" cAccordionButton>
          {{attributesForm.value.attributes[i].name}}
        </button>
      </ng-template>
      <!-- 其余body模板代码保持不变 -->
    </c-accordion-item>
</c-accordion>

组件类中访问实例（如需批量或逻辑内操作） #

如果需要在组件类中通过索引访问特定的accordion项，可使用@ViewChildren获取所有项的实例集合：

1. 在组件类中注入QueryList：

import { ViewChildren, QueryList } from '@angular/core';
import { CAccordionItem } from '@coreui/angular';

// ...

@ViewChildren(CAccordionItem) accordionItems!: QueryList<CAccordionItem>;

2. 通过索引访问并调用方法：

toggleItemByIndex(index: number): void {
  const targetItem = this.accordionItems.get(index);
  if (targetItem) {
    targetItem.toggleItem();
    // 也可访问visible属性：targetItem.visible
  }
}

这样不管是模板内直接操作，还是组件类中逻辑处理，都能轻松访问动态生成的accordion项实例。

内容的提问来源于stack exchange，提问作者Athadu