akveo / akveo/nebular

Bug: Accordion does not work with Angular new control flow (@for)

未關閉
#3,312 0 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視
主要語言
TypeScript
星號
8.1k
分支
1.5k
PR 合併指標
30 天內沒有已合併 PR

描述

## Description

When using **Angular new control flow syntax (`@for`)**, `nb-accordion` does not behave correctly.\
Accordion items rendered with `@for` are not properly initialized or updated, while the same template works as expected when using `*ngFor`.

This seems to be related to how `nb-accordion` initializes and tracks its projected `nb-accordion-item` children.

------------------------------------------------------------------------

## Environment

- Angular: **21.x**
- Nebular: **17.x**
- Browser: All

------------------------------------------------------------------------

## Expected behavior

`nb-accordion` should work correctly regardless of whether accordion items are rendered using:

- `*ngFor` (legacy syntax)
- `@for` (new Angular control flow)

Accordion items should: - Render correctly - Expand and collapse properly - React to user interaction

------------------------------------------------------------------------

## Actual behavior

When `nb-accordion-item` components are rendered using `@for`:

- Only the first accordion item is initialized and registered by the accordion
- The first item works correctly (header interaction and expand/collapse behave as expected)
- Subsequent items rendered by `@for` are ignored, as if they did not exist
- The accordion behaves as if it contained a single item, even though multiple items are rendered in the template

Using `*ngFor` instead of `@for` correctly initializes and registers all accordion items, and the accordion behaves as expected.

------------------------------------------------------------------------

## Minimal reproduction example

``` html

@for (item of items; track $index) {


{{ item.title }}


{{ item.content }}


}

```

The same template works correctly when using `*ngFor`.

------------------------------------------------------------------------

## Additional notes

This issue affects compatibility with Angular's recommended modern template syntax and makes it difficult to adopt `@for` in applications using Nebular.

Since `*ngFor` is treated as legacy and Angular actively enforces and promotes the new control flow syntax through warnings and template migrations, this issue becomes a blocker for adopting current and future Angular best practices.

貢獻指南

開啟貢獻指南

評估

這個 Issue 還沒有評估資料。

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。