ngx-bootstrap - 子组件中的手风琴组

如何解决ngx-bootstrap - 子组件中的手风琴组

父组件

<input type="button" class="btn btn-primary"  (click)="allExpanded = !allExpanded" [attr.value]="allExpanded ? 'Collapse All': 'Expand All'" >  
            <div class="all-components" >
                <accordion>
                    <accordion-group heading="Test1" [isOpen]="allExpanded">
                    Hey
                    </accordion-group>
                    <accordion-group heading="Test2" [isOpen]="allExpanded">
                    Hey
                    </accordion-group>
                    <app-child-comp-1 allExpanded = "{{ allExpanded }}" ></app-child-comp-1>
                    <app-child-comp-2 allExpanded = "{{ allExpanded }}" ></app-child-comp-2>
                </accordion>
            </div>

子组件 1

<accordion-group heading="Child Component *ngIf="dataExists" [isOpen]="allExpanded">
Hey
</accordion-group>

我想做什么

在父组件中维护手风琴并调用具有的子组件

当点击父组件中的按钮时，设置 [isOpen] 属性为true/false 作为折叠/展开所有组件的一种方式

为什么我要这样做

某些子组件可能没有数据，如果是这种情况，我不希望显示

例如：

<accordion-group heading="Child Component" *ngIf="dataExists" [isOpen]="allExpanded">
Hey
</accordion-group>

如果子组件 1 的 dataExists 为 false，则不显示此

我面临的问题

将 allExpanded 传递给子组件并设置 [isOpen]="allExpanded" 在子组件中没有按预期工作 - 它只会展开，不会折叠。

它确实适用于在父组件中定义的 。在我看来，这个问题与如何从父组件调用子组件有关，但我对 Angular 很陌生，所以我迷路了。

观察

当点击 Expand/Collapse 按钮​​时，所有 [isOpen] 的值都从 True 变为 False，但组的类只改变父组件中定义的那些，而不是子组件中定义的。

解决方法

这里似乎不需要子组件。 ng-container 就足够了

<input type="button" class="btn btn-primary"  (click)="allExpanded = !allExpanded" [attr.value]="allExpanded ? 'Collapse All': 'Expand All'" >  
            <div class="all-components" >
                <accordion>
                    <accordion-group heading="Test1" [isOpen]="allExpanded">
                    Hey
                    </accordion-group>
                    <accordion-group heading="Test2" [isOpen]="allExpanded">
                    Hey
                    </accordion-group>
                    <ng-container *ngIf="dataExists">
                       <accordion-group heading="Child Component" [isOpen]="allExpanded">
                          Hey
                       </accordion-group>
                       <accordion-group heading="Child Component" [isOpen]="allExpanded">
                          Hey
                       </accordion-group>
                    </ng-container>
                </accordion>
            </div>