使用ng-bootstrap进行模板解析错误

时间:2019-04-10 18:47:59

标签: javascript angular ng-bootstrap

我遇到错误

Uncaught Error: Template parse errors:
There is no directive with "exportAs" set to "ngbAccordion" ("
    <p *ngIf="spinner" class="text-center margin-100">Loading...</p>

    <ngb-accordion [ERROR ->]#acc="ngbAccordion" activeIds="ngb-panel-0">
      <ngb-panel title="Simple">
        <ng-template "): ng:///SurveysModule/SurveysComponent.html@4:19
'ngb-panel' is not a known element:
1. If 'ngb-panel' is an Angular component, then verify that it is part of this module.
2. If 'ngb-panel' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

    <ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
      [ERROR ->]<ngb-panel title="Simple">
        <ng-template ngbPanelContent>
    <table class="table table-bord"): ng:///SurveysModule/SurveysComponent.html@5:6
'ngb-accordion' is not a known element:
1. If 'ngb-accordion' is an Angular component, then verify that it is part of this module.
2. If 'ngb-accordion' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    <p *ngIf="spinner" class="text-center margin-100">Loading...</p>

基于此代码

  <section>
    <p *ngIf="spinner" class="text-center margin-100">Loading...</p>

    <ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0">
      <ngb-panel title="Simple">
        <ng-template ngbPanelContent>
    <table class="table table-bordered" *ngIf="surveyFormData.length">
        <thead>
        <tr>
            <th scope="col">Form Type</th>
            <th scope="col" class="width-110">Registry Type</th>
            <th scope="col" class="width-70">Version</th>
            <th scope="col" class="width-150">Published Status</th>
            <th scope="col" class="width-100">Active Status</th>
            <th scope="col" class="width-260 text-center">Actions</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let form of surveyFormData">
            <th scope="row">{{ form.FormType }}</th>
            <th scope="row">{{form.RegistryID | registryType}}</th>
            <th scope="row">{{form.Version }}</th>
            <th scope="row">{{form.IsPublished ? 'Published' : 'Unpublished'}}</th>
            <th scope="row">{{form.IsActive ? 'Active' : 'Inactive'}}</th>
            <td class="text-nowrap">
                <a href="javascript:;" (click)="exportSpecs(form)" title="Export Specs" class="record-action">
                    <i class="material-icons">input</i>
                    <span>Export Specs</span>
                </a>
                <a href="javascript:;" (click)="publishForm(form)" title="Publish" class="record-action" [class.disabled]="form.IsPublished">
                    <i class="material-icons">publish</i>
                    <span>Publish</span>
                </a>

                <a href="javascript:;" (click)="confirmFormActivation(form)" title="Activate" class="record-action" [class.disabled]="form.IsActive">
                    <i class="material-icons">toggle_on</i>
                    <span>Activate</span>
                </a>

                <a routerLink="/records/playground/{{form.FormType}}/{{form.Version}}" title="View form in Playground"
                   class="record-action">
                    <i class="material-icons">visibility</i>
                    <span>View</span>
                </a>
                <a routerLink="/survey-builder/{{form.FormType}}/{{form.RegistryID}}/{{form.Version}}"
                   title="Edit Survey" class="record-action">
                    <i class="material-icons">create</i>
                    <span>Edit</span>
                </a>
            </td>
        </tr>
        </tbody>
    </table>
  </ng-template>
</ngb-panel>
</ngb-accordion>

</section>

我认为我正确地遵循了https://ng-bootstrap.github.io/#/components/accordion/examples

似乎已正确安装并包含在导入中

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


@NgModule({

    declarations: [
        AppComponent
    ],
    imports: [
        NgbModule,

1 个答案:

答案 0 :(得分:2)

角度组件是模块范围的,所以我的建议是将function parseXML(){ var parseString = require('xml2js').parseString; var str= '<Customers>\ <Customer>\ <first>JIM</first>\ <last>BEAM</last>\ <address>22. JIM. RD.</address>\ <age>24</age>\ <age2>2.0</age2>\ <Phone>206-555-0144</Phone>\ </Customer>\ </Customers>' parseString(str, function (err, result) { console.log(JSON.stringify(result)); //<<<<<<<RETURNS THE JSON I EXPECTED return JSON.stringify(result); }); } app.get('/*', (request, response) => { var json=parseXML(); console.log(json) //<<<<<<RETURNS UNDEFINED var obj=JSON.parse(json); console.log(obj); var jsonres= obj.Customers.Customer[0]["first"]; response.send(['Hello from Express!',jsonres]) }) 导入NgbModule

SurveysModule