1

"HI", "title1", "objName11"虽然我的 HTML 加载（由于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" }]
                              }};

}

我的对象模型：

export class MyObject{
         objList: ObjList[];
}

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

export class Detail{
      objName:string;
}
4

2 回答 2

0

这太尴尬了，有点令人沮丧。我非常投入地试图找出缺少哪个样式/库/模块，我为此浪费了整整 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 ],

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

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

和

@NgModule({
    imports: [
        NgbModule,

    ]})
于 2016-08-25T12:30:10.663 回答
0

您需要解决的两件事：

  1. “模板”到“ng-模板”
  2. “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>

希望能帮助到你。它对我有用

于 2018-04-10T04:00:30.750 回答