来自Angular2的ngb手风琴ng引导未显示在视图中

虽然我的HTML加载（由于顶部的

span

标记，我可以看到

“HI”、“title1”、“objName11”

），ngb手风琴不会在视图上呈现。 我不知道我错过了什么

没有编译/生成错误。控制台上没有错误：(

我看到了一些关于NGB-PRECOMPILE的东西，这有必要吗？在@ng bootstrap/ng bootstrap中也找不到它。

下面是代码片段， （为了切中要害，我删除了

onInit

实现，在该实现中我使用了服务/可观察对象来实际加载

MyObject

，从而大大简化了代码）

我的模板：./someComponent.Component.html:

     <span>Hi<span>
     <span>myObject.objList[0].title</span>
     <span>myObject.objList[0].details[0].objName</span>
     <ngb-accordion>
        <ng-panel *ngFor="let myObj of myObject.objList">
            <template ngbPanelTitle>

                        <span>{{myObj.title}}</span>

            </template>
            <template ngbPanelContent>
                <div *ngFor="let detail of myObj.details" class="row">
                    <span>
                        {{detail.objName}}
                    </span>

            </template>
        </ng-panel>
    </ngb-accordion>

MyObject模型：

export class MyObject{
         objList: ObjList[];
}

export class ObjList{
    title:string;
    details: Detail[];
}

export class Detail{
      objName:string;
}

---

这太令人尴尬了，也有点令人沮丧。我太想找出缺少哪种风格/库/模块了，为此我浪费了整整两天的时间

不过有一件事，我对Ang2指令、entryComponent（预编译）等有了更多的了解

问题在于

<ng-panel *ngFor="let myObj of myObject.objList">

2） 在decorator中：

directives: [ NGB_ACCORDION_DIRECTIVES ],

3） 无需

entryComponents

4） 在app.module.ts中：

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

及

---

这太尴尬了，有点令人沮丧。我非常想找出缺少的样式/库/模块，为此我浪费了整整两天的时间

不过有一件事，我对Ang2指令、entryComponent（预编译）等有了更多的了解

问题在于

<ng-panel *ngFor="let myObj of myObject.objList">

2） 在decorator中：

directives: [ NGB_ACCORDION_DIRECTIVES ],

3） 无需

entryComponents

4） 在app.module.ts中：

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

及

---

您需要解决两件事：

“模板”到“ng模板”

“ng面板”至“ngb面板”

因此，代码应该是：

<ngb-panel *ngFor="let myObj of myObject.objList">
                    <ng-template ngbPanelTitle>

                                <span>{{myObj.title}}</span>

                    </ng-template>
                    <ng-template ngbPanelContent>
                        <div *ngFor="let detail of myObj.details" class="row">
                            <span>
                                {{detail.objName}}
                            </span>
                        </div>

                    </ng-template>
            </ngb-panel>

{{myObj.title}
{{detail.objName}

---

希望能有帮助。它在我这方面起作用

您需要解决两件事：

“模板”到“ng模板”

“ng面板”至“ngb面板”

因此，代码应该是：

<ngb-panel *ngFor="let myObj of myObject.objList">
                    <ng-template ngbPanelTitle>

                                <span>{{myObj.title}}</span>

                    </ng-template>
                    <ng-template ngbPanelContent>
                        <div *ngFor="let detail of myObj.details" class="row">
                            <span>
                                {{detail.objName}}
                            </span>
                        </div>

                    </ng-template>
            </ngb-panel>

{{myObj.title}
{{detail.objName}

---

希望能有帮助。它在我这边起作用

以下是我的依赖关系：“@angular/common”：“2.0.0-rc.5”、“@angular/compiler”：“2.0.0-rc.5”、“@angular/core”：“2.0.0-rc.5”、“@angular/forms”：“0.3.0”、“@angular/http”：“2.0.0-rc.5”、“@angular/platform browser”：“2.0.0-rc.5”，“@angular/router”：“3.0.0-rc.1”，“引导”：“4.0.0-alpha.3”，“@ng引导/ng引导”：“1.0.0-alpha.2”，“core js”：“2.4.1”，“es6垫片”：“0.35.1”，“反射元数据”：“0.1.8”，“rxjs”：“5.0.0-beta.6”，“zone.js”：“0.6.15”“更新：在@angular/compiler 2.0.0-rc5中，预编译被更改为entryComponents。你在src/index.html中确实有类似于”``的行吗？@Andrew，是的，我有。以下是我的依赖项：“@angular/common”：“2.0.0-rc.5”“@angular/compiler”：“2.0.0-rc.5”、“@angular/core”：“2.0.0-rc.5”、“@angular/forms”：“0.3.0”，“@angular/http”：“2.0.0-rc.5”，“@angular/platform浏览器”：“2.0.0-rc.5”，“@angular/platform浏览器动态”：“2.0.0-rc.5”，“@angular/router”：“3.0.0-rc.1”，“引导程序”：“4.0-alpha.3”，“@ng引导程序/ng引导程序”：“1.0-alpha.2”，“核心js”：“2.4.1”，“es6”：“0.35.1”，“反射元数据”：“0.1.8”，“rxjs”：“5.0.0-beta.6”，“zone.js”：“0.6.15”更新：在@angular/compiler 2.0.0-rc5中，预编译被更改为entryComponents。你在src/index.html中肯定有类似“``的行吗？@Andrew，是的，我有。