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 摘要。