找不到名称“模块”

Question

我正在处理一个 Angular 2 项目。 我正在尝试在我的项目中添加数据表组件。 但是在编译时面临上述错误。需要做什么才能获得所需的输出。 请指导我正确的方向。

 admin-products.component.ts import { Component, OnInit, OnDestroy } from '@angular/core'; import { ProductService } from 'src/app/product.service'; import { Subscription } from 'rxjs'; import { Product } from 'src/app/models/product'; import { DataTableResource } from 'angular-4-data-table'; @Component({ selector: 'app-admin-products', templateUrl: './admin-products.component.html', styleUrls: ['./admin-products.component.css'] }) export class AdminProductsComponent implements OnInit,OnDestroy { products: Product[]; filteredProducts: any[]; subscription: Subscription; tableResource:DataTableResource<Product>; items: Product[] = []; itemCount: Number; constructor(private productService:ProductService) { this.subscription = this.productService.getAll(). subscribe(products =>{ this.filteredProducts= this.products = products; this.initializeTable(products); }); } private initializeTable(products:Product[]){ this.tableResource.query({ offset:0}) .then(items => this.items = items); this.tableResource.count() .then(count => this.itemCount = count); } reloadItems(params){ if(!this.tableResource) return; this.tableResource.query(params) .then(items => this.items = items); } filter(query: string){ this.filteredProducts = (query) ? this.products.filter(p => p.title.toLowerCase().includes(query.toLowerCase())) : this.products; } ngOnDestroy(){ this.subscription.unsubscribe() } ngOnInit() { } }

 admin-products.component.html <p> <a routerLink="/admin/products/new" class="btn btn-primary">New Product</a> </p> <p> <input #query (keyup)="filter(query.value)" type="text" class="form-control" placeholder="Search..."> </p> <data-table [items]="items" [itemCount]="itemCount" (reload)="reloadItems($event)" > <data-table-column [property]="'title'" [header]="'title'" [sortable]="true" [resizable]="true" > <data-table-column [property]="'price'" [header]="'Price'" [sortable]="true" [resizable]="true" > <ng-template #dataTableCell let-item="item"> {{item.price | currency:'USD':true}} </ng-template> </data-table-column> <data-table-column [property]="'$key'" > <ng-template #dataTableCell let-item="item"> <a [routerLink]="['/admin/products', item.$key]">Edit</a> </ng-template> </data-table-column> </data-table>

 app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import {AngularFireModule} from 'angularfire2'; import {AngularFireDatabaseModule} from 'angularfire2/database'; import {AngularFireAuthModule} from 'angularfire2/auth'; import {RouterModule} from '@angular/router'; import{NgbModule} from '@ng-bootstrap/ng-bootstrap'; import { BsNavbarComponent } from './bs-navbar/bs-navbar.component'; import { HomeComponent } from './home/home.component'; import { ProductsComponent } from './products/products.component'; import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component'; import { CheckOutComponent } from './check-out/check-out.component'; import { OrderSuccessComponent } from './order-success/order-success.component'; import { MyOrdersComponent } from './my-orders/my-orders.component'; import { AdminProductsComponent } from './admin/admin-products/admin-products.component'; import { AdminOrdersComponent } from './admin/admin-orders/admin-orders.component'; import { LoginComponent } from './login/login.component'; import {FormsModule} from '@angular/forms'; import {CustomFormsModule} from 'ng2-validation'; import {DataTableModule} from 'angular-4-data-table'; import { AppComponent } from './app.component'; import { environment } from 'src/environments/environment'; import { AuthService } from './auth.service'; import { AuthGuard as AuthGuard } from './auth-guard.service'; import { UserService } from './user.service'; import { AdminAuthGuard as AdminAuthGuard } from './admin-auth-guard.service'; import { ProductFormComponent } from './admin/product-form/product-form.component'; import { CategoryService } from './category.service'; import { ProductService } from './product.service'; @NgModule({ declarations: [ AppComponent, BsNavbarComponent, HomeComponent, ProductsComponent, ShoppingCartComponent, CheckOutComponent, OrderSuccessComponent, MyOrdersComponent, AdminProductsComponent, AdminOrdersComponent, LoginComponent, ShoppingCartComponent, ProductFormComponent ], imports: [ BrowserModule, FormsModule, CustomFormsModule, DataTableModule, AngularFireModule.initializeApp(environment.firebase), AngularFireDatabaseModule, AngularFireAuthModule, NgbModule.forRoot(), RouterModule.forRoot([ {path: '', component: HomeComponent}, {path: 'products', component: ProductsComponent}, {path: 'shopping-cart', component: ShoppingCartComponent}, {path: 'login', component: LoginComponent}, {path: 'check-out', component: CheckOutComponent,canActivate:[AuthGuard]}, {path: 'order-success', component: OrderSuccessComponent, canActivate:[AuthGuard]}, {path: 'my/orders',component: MyOrdersComponent,canActivate:[AuthGuard]}, {path: 'admin/products/new', component:ProductFormComponent,canActivate:[AuthGuard,AdminAuthGuard]}, {path: 'admin/products/:id', component:ProductFormComponent,canActivate:[AuthGuard,AdminAuthGuard]}, {path: 'admin/products', component: AdminProductsComponent,canActivate:[AuthGuard,AdminAuthGuard]}, {path: 'admin/orders', component: AdminOrdersComponent,canActivate:[AuthGuard,AdminAuthGuard]} ]) ], providers: [ AuthService, AuthGuard, AdminAuthGuard, UserService, CategoryService, ProductService ], bootstrap: [AppComponent] }) export class AppModule { }

应该这样做以获得所需的输出。 请引导我走向正确的方向

Answer 1

这似乎与编译器配置问题有关。 您正在尝试添加外部组件，为此您需要对 angular 项目进行一些修改，例如在 tsconfig.json 文件中。 这些通常由库文档提供。 例如，请参阅此相关问题： Angular2 代码中的 TypeScript 错误：找不到名称“模块”

但是，由于您正在尝试使用表格，我强烈建议您使用一些众所周知的 Angular 组件库，它们都有详细记录和解释的示例：

1. Angular Material（我最喜欢的） - https://material.angular.io/components/table/examples
2. Prime NG - https://www.primefaces.org/primeng/#/table

如果您决定这样做，只需按照其中任何一个的入门指南进行操作，您应该能够使用构建良好的表组件并更轻松地找到相关错误的解决方案。