自举:角13手风琴不适用于自定义组件。

Question

我使用的是具有角度13的ng引导手风琴。我的问题是，在中间使用自定义组件时手风琴条目不会出现。

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

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

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手风琴”标签之后用“ng容器”标签解决了这个问题。

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