Question

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

没有编译/构建错误。控制台上没有错误。：（

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

以下是代码段， （我已经通过删除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" }]
                              }};

}

MyObjectModel：

export class MyObject{
         objList: ObjList[];
}

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

export class Detail{
      objName:string;
}

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

    ]})

Answer 2

您需要解决的两件事：

“template”到“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>

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

2 个答案: