来自 Angular2 ng-bootstrap 的 ngb-accordion 未显示在视图中答案

【问题标题】：ngb-accordion from Angular2 ng-bootstrap not showing on view来自 Angular2 ng-bootstrap 的 ngb-accordion 未显示在视图中
【发布时间】：2018-04-10 12:00:30
【问题描述】：

虽然我的 HTML 加载（由于顶部的 span 标记而能够看到 "HI", "title1", "objName11"。），ngb-accordion 没有在视图上呈现。我无法弄清楚我错过了什么。

没有编译/构建错误。控制台上没有错误。 :(

我看到了一些关于 NGB-PRECOMPILE 的东西，这有必要吗？也无法在@ng-bootstrap/ng-bootstrap 中找到它。 https://stackoverflow.com/questions/38792108/precompile-error-on-ng-bootstrap-ngb-precompile

以下是代码sn-ps， （我已经通过删除 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>

组件：

import { Component, OnInit } from '@angular/core';
import {  NGB_ACCORDION_DIRECTIVES }  from '@ng-bootstrap/ng-bootstrap/accordion/accordion';
import { MyObject } from './MyObject.model';



@Component({
    selector: 'some-selector',
    templateUrl: './someComponent.Component.html',
    directives: [ NGB_ACCORDION_DIRECTIVES ],

})
export class SomeComponent {
   public myObject: MyObject = {
                        objList: [
                              { title: "title1",
                                details: [{ objName: "objName11" }, 
                                          { objName: "objName12" }]
                              },
                              { title: "title2",
                                details: [{ objName: "objName21" }, 
                                          { objName: "objName22" }]
                              }};

}

我的对象模型：

export class MyObject{
         objList: ObjList[];
}

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

export class Detail{
      objName:string;
}

【问题讨论】：

以下是我拥有的依赖项： "@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/平台浏览器”：“2.0.0-rc.5”、“@angular/platform-browser-dynamic”：“2.0.0-rc.5”、“@angular/router”：“3.0.0-rc. 1”，“引导程序”：“4.0.0-alpha.3”，“@ng-bootstrap/ng-bootstrap”：“1.0.0-alpha.2”，“core-js”：“2.4.1”， “es6-shim”：“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 中有类似 `` maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/…">`` 的行吗？
@Andrew，是的，我有。

标签： angular ng-bootstrap

【解决方案1】：

这太尴尬了，有点令人沮丧。我非常投入地试图找出缺少哪个样式/库/模块，我为此浪费了整整 2 天的时间。

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

问题在于

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

应该是这样的

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

总结一下， ngb-bootstrap 组件只需要：

1) 在您的组件中引用您的 NGB 指令：

import {  NGB_ACCORDION_DIRECTIVES }  from '@ng-bootstrap/ng-bootstrap/accordion/accordion';

2) 在装饰器内：

directives: [ NGB_ACCORDION_DIRECTIVES ],

3) 不需要entryComponents 4）在app.module.ts中：

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

和

@NgModule({
    imports: [
        NgbModule,

    ]})

【讨论】：

【解决方案2】：

你需要解决两件事：

“模板”到“ng-template”
“ng-panel”到“ngb-panel”

所以代码应该是：

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

希望对您有所帮助。它对我有用

【讨论】：