ng-bootstrap：angular13手風琴不適用于自定義組件

我正在使用角度為 13 的 ng-bootstrap 手風琴。我的問題是，在兩者之間使用自定義組件時，手風琴條目不顯示。

我第一次嘗試使用它時的自定義組件：

    <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 面板。

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

然后導致顯示條目但其內容為空。

空條目

和呈現的 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>

我迷路了，我不明白我沒有在手風琴之間添加元素，渲染時它是如此挑剔嗎？？。使用自定義面板行內作業，但這違背了組件的目的。

我可能會嘗試使用原始引導程式創建手風琴。編輯：也沒有作業，因為資料目標系結的問題。

編輯：放棄自定義組件，它是否臟和行內

<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>

uj5u.com熱心網友回復：

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不再是 ContentChild ，NgbAccordion因此它不起作用。

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

標籤：有角的 ng-bootstrap

上一篇：從enumAngular中選擇選項

下一篇：w3.css框架的Intellij想法代碼完成？