时间戳

首页 > 解决方案 > ERROR 错误：未捕获（承诺中）nb-card-header' 不是已知元素：

angular - ERROR 错误：未捕获（承诺中）nb-card-header' 不是已知元素：

问题描述

我对 NGX-Template 和 Angular 很陌生。我正在前进，但遇到了一个问题。

我创建了一个新页面：客户。在这个页面中，我想渲染一个 nb-card 元素

  <div *ngFor="let customer of values" class="col-md-12 col-lg-6 col-xxxl-6">
    <nb-card>
        <nb-card-header>{{customer.name}}</nb-card-header>
          <nb-card-body>
            <p>Beautifull body</p>
          </nb-card-body>
        <nb-card-footer>Good customer</nb-card-footer>
        </nb-card>
  </div>
</div>

在我的客户模块中，我导入了主题和 nbcardmodule

import { ThemeModule } from '../../@theme/theme.module';
import {
  NbButtonModule,
  NbCardModule,
  NbProgressBarModule,
  NbTabsetModule,
  NbUserModule,
  NbIconModule,
  NbSelectModule,
  NbListModule,
} from '@nebular/theme';
import { CustomerRoutingModule } from './customer-routing.module';
import { CustomerCardComponent } from './customer-card/customer-card.component';
import {CustomerComponent } from './customer.component';

@NgModule({
  imports: [
    NbButtonModule,
    NbCardModule,
    NbProgressBarModule,
    NbTabsetModule,
    NbUserModule,
    NbIconModule,
    NbSelectModule,
    NbListModule,
    ThemeModule,
    CustomerRoutingModule,
  ],
  declarations: [
    CustomerCardComponent, CustomerComponent  ],

})
export class CustomerModule {}

最后我的 customer.component.ts 文件

import { Component, OnInit } from '@angular/core';
import { Customer } from '../../@core/models/customer.model';
import { CustomerService } from '../../@core/services/customer.service'

@Component({
  selector: 'ngx-customer',
  templateUrl: './customer.component.html',
  styleUrls: ['./customer.component.scss']
})
export class CustomerComponent implements OnInit {

  public message: string;
  public values: any[];

  constructor(private customerService: CustomerService){}

  ngOnInit() {
    this.customerService.getAll<Customer[]>().subscribe((data: Customer[]) => this.values = data, error => () => {
      this.message = 'Error: Could not get the data from the service';
    },
    () => {
      this.message = 'succes';
    });

  }
}

这是控制台提供的错误

ERROR Error: Uncaught (in promise): Error: Template parse errors:
'nb-card-header' is not a known element:
1. If 'nb-card-header' is an Angular component, then verify that it is part of this module.
2. If 'nb-card-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("  <div *ngFor="let customer of values" class="col-md-12 col-lg-6 col-xxxl-6">
    <nb-card>
        [ERROR ->]<nb-card-header>{{customer.name}}</nb-card-header>
          <nb-card-body>
            <p>Beautifull"): ng:///PagesModule/CustomerComponent.html@3:8

所以我希望有人能把我推向正确的方向。我敢肯定这是我忽略的小事。

提前致谢！:-)

标签： angulartypescriptngx-admin

解决方案

没关系...我已经在 pages.module 中声明了我的 Customer 组件。所以它被宣布为双倍（参见上面的 Customer.Module.ts）。

我已经删除了 customer.module 并且一切正常。

推荐阅读