Question

我正在从事angular2项目。我正在尝试在项目中添加数据表组件。但是在编译时面临上述错误。需要做些什么才能获得所需的输出。请指引我正确的方向。

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-coloumn
   [property]="'title'"
   [header]="'title'"
   [sortable]="true"
   [resizable]="true"
 >
 
 <data-table-coloumn
 [property]="'price'"
 [header]="'Price'"
 [sortable]="true"
 [resizable]="true"
>

 <ng-template #dataTableCell let-item="item">
    {{item.price | currency:'USD':true}}
 </ng-template> 
</data-table-coloumn>

<data-table-coloumn
 [property]="'$key'"
>
 
<ng-template #dataTableCell let-item="item">
     <a [routerLink]="['/admin/products', item.$key]">Edit</a>
 </ng-template> 
 </data-table-coloumn>

</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

这似乎与编译器配置问题有关。您正在尝试添加外部组件，为此您需要对您的角度项目进行一些修改，例如在tsconfig.json文件中。这些通常由库文档提供。例如，请参见以下相关问题：TypeScript error in Angular2 code: Cannot find name 'module'

但是，由于您正尝试使用表，因此我强烈建议为您提供一些著名的Angular组件库，所有这些库都有详细的记录和解释的示例：

角材料（我的最爱）-https://material.angular.io/components/table/examples
Prime NG-https://www.primefaces.org/primeng/#/table

如果您决定这样做，只需遵循其中任何一个的入门指南，您就可以使用构建良好的表组件，并且更容易找到相关错误的解决方案。

找不到名称“模块”

1 个答案: