ng-bootstrap: angular 13 手风琴不适用于自定义组件

Question

我正在使用 ng-bootstrap 手风琴和 angular 13。我的问题是手风琴条目在两者之间使用自定义组件时不显示。

我第一次尝试使用自定义组件时：

    <ngb-accordion [closeOthers]="true">
        <custom-panel *ngFor="let i of someList" [el]=i></custom-panel>
    </ngb-accordion>

自定义面板：

<ngb-panel>
    <ng-template ngbPanelHeader>
        <div class="row align-items-center justify-content-center justify-content-md-between">
           {{el}}
        </div>
    </ng-template>
    <ng-template ngbPanelContent>
        ...
    </ng-template>
</ngb-panel>

什么也没渲染，HTML 只显示一个空的手风琴。然后我尝试将选择器更改为 selector: '[custom-panel]' 并将其应用于 ngb-panel。

        <ngb-panel *ngFor="let i of someList" custom-panel [el]="i">
        </ngb-panel>

然后导致条目显示但内容为空。

empty entries

和呈现的 HTML:

<ngb-accordion role="tablist" class="accordion" ng-reflect-close-other-panels="true" aria-multiselectable="false"><!--container--><div class="card"><div role="tab" class="card-header" id="ngb-panel-0-header"><button type="button" class="btn btn-link collapsed" ng-reflect-ngb-panel-toggle="[object Object]" aria-expanded="false" aria-controls="ngb-panel-0"> <!--bindings={
 "ng-reflect-ng-template-outlet": null
}--></button><!--bindings={
 "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></div><!--bindings={
 "ng-reflect-ng-if": "false"
}--></div><div class="card"><div role="tab" class="card-header" id="ngb-panel-1-header"><button type="button" class="btn btn-link collapsed" ng-reflect-ngb-panel-toggle="[object Object]" aria-expanded="false" aria-controls="ngb-panel-1"> <!--bindings={
 "ng-reflect-ng-template-outlet": null
}--></button><!--bindings={
 "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></div><!--bindings={
 "ng-reflect-ng-if": "false"
}--></div><div class="card"><div role="tab" class="card-header" id="ngb-panel-2-header"><button type="button" class="btn btn-link collapsed" ng-reflect-ngb-panel-toggle="[object Object]" aria-expanded="false" aria-controls="ngb-panel-2"> <!--bindings={
 "ng-reflect-ng-template-outlet": null
}--></button><!--bindings={
 "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></div><!--bindings={
...
 "ng-reflect-ng-template-outlet": null
}--></button><!--bindings={
 "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></div><!--bindings={
 "ng-reflect-ng-if": "false"
}--></div><!--bindings={
 "ng-reflect-ng-for-of": ""
}--></ngb-accordion>

我迷路了我不明白我没有在手风琴之间添加元素渲染时它只是这么挑剔吗？？。使用自定义面板内联是可行的，但这违背了组件的目的。

我可能会尝试用原始 bootstrap 创建手风琴。编辑：也没有用，因为数据目标绑定有问题。

编辑：放弃了自定义组件，did it dirty&inline

<ngb-accordion class="mt-4" [closeOthers]="true">
        <ngb-panel *ngFor="let i of someList">
            <ng-template ngbPanelHeader>
                <div class="row align-items-center justify-content-center justify-content-md-between">
                    ... // use i
                </div>
            </ng-template>
            <ng-template ngbPanelContent >
             ...
        </ngb-panel>
    </ngb-accordion>

Answer 1

NgbAccordion 期望 NgbPanel 作为它的直接 ContentChild:

export class NgbAccordion implements AfterContentChecked {
  @ContentChildren(NgbPanel) panels: QueryList<NgbPanel>;
  ...
}

https://github.com/ng-bootstrap/ng-bootstrap/blob/369faa1f2634a445f136d8423c1da034ecc3b83c/src/accordion/accordion.ts#L208

因此，当我们尝试执行以下操作时，NgPanel 不再是 NgbAccordion 的 ContentChild，因此它不起作用。

<ngb-accordion [closeOthers]="true">
   <custom-panel *ngFor="let i of someList" [el]=i></custom-panel>
</ngb-accordion>

Answer 2

我能够在 'ngb-accordion' 标签后使用 'ng-container' 标签解决这个问题

<ngb-accordion class="accordion1" #acc="ngbAccordion">
  <ng-container *ngFor="let formshape of filterDataShapes">
    <ngb-panel *ngIf="formshape.type == 'select'">
      <ng-template ngbPanelContent>
      </ng-template>
    </ngb-panel>
  </ng-container>
</ngb-accordion>

ng-bootstrap: angular 13 手风琴不适用于自定义组件

ng-bootstrap: angular 13 accordion does not work with custom component

ng-bootstrap

angular