1

私の HTML は読み込まれますが (上部のタグ"HI", "title1", "objName11"により表示されます)、 ngb-accordion がビューにレンダリングされません。見逃したものを理解できません。span

コンパイル/ビルド エラーはありません。コンソールにエラーはありません。:(

NGB-PRECOMPILE について何か見ましたが、これは必要ですか? @ng-bootstrap/ng-bootstrap でも見つかりません。 https://stackoverflow.com/questions/38792108/precompile-error-on-ng-bootstrap-ngb-precompile

以下はコード スニペットです (要点を説明するために、サービス/オブザーバブルを使用して実際に をロードする実装を削除することで、コードを大幅に簡素化しました)。onInitMyObject

私のテンプレート: ./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;
}
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 ],

3) entryComponents app.module.ts の 4) は必要ありません:

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

と

@NgModule({
    imports: [
        NgbModule,

    ]})
于 2016-08-25T12:30:10.663 に答える