2017-06-19 78 views
0

angular2智能表未显示表。我也跟着链接git hubangular2智能表不工作

app.module.ts

import { NgModule }  from '@angular/core'; 
 
import { BrowserModule } from '@angular/platform-browser'; 
 
import { FormsModule } from '@angular/forms'; 
 
import { AppComponent } from './app.component'; 
 
import { Ng2SmartTableModule } from 'ng2-smart-table'; 
 
@NgModule({ 
 
    imports: [BrowserModule, FormsModule, Ng2SmartTableModule], 
 
    declarations: [AppComponent], 
 
    bootstrap: [AppComponent] 
 

 
}) 
 
export class AppModule { }

request.component.ts

import { Component } from '@angular/core'; 
 
import { ItableValues } from './tableValues.component'; 
 
import { RequestFilterPipe } from './request-filter.pipe'; 
 
import { TableService } from './table-service.component'; 
 
@Component({ 
 
    selector: 'mm-request', 
 
    templateUrl: 'app/dataManagement/request.component.html', 
 
    
 
}) 
 

 
export class RequestComponent { 
 
    pageTitle: string = 'Request'; 
 
    imageWidth: number = 50; 
 
    imageMargin: number = 2; 
 
    
 
    settings = { 
 
     columns: { 
 
      id: { 
 
       title: 'ID' 
 
      }, 
 
      name: { 
 
       title: 'Full Name' 
 
      }, 
 
      username: { 
 
       title: 'User Name' 
 
      }, 
 
      email: { 
 
       title: 'Email' 
 
      } 
 
     } 
 
    }; 
 
    data = [ 
 
     { 
 
      id: 1, 
 
      name: "Leanne Graham", 
 
      username: "Bret", 
 
      email: "[email protected]" 
 
     }, 
 
     { 
 
      id: 2, 
 
      name: "Ervin Howell", 
 
      username: "Antonette", 
 
      email: "[email protected]" 
 
     }, 
 

 
     // ... list of items 
 

 
     { 
 
      id: 11, 
 
      name: "Nicholas DuBuque", 
 
      username: "Nicholas.Stanton", 
 
      email: "[email protected]" 
 
     } 
 
    ]; 
 

 
}

request.component.html

<div> 
 
    <ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table> 
 
</div>

每当我运行应用程序,它显示只有第一个载入页面。 enter image description here 所有帮助将不胜感激。

更新: 我已删除Ng2SmartTableModule用于声明以及自举。它用于测试。请参阅控制台日志和错误main.js文件。 enter image description here

错误加载http://localhost:53869/app/main.js

"use strict"; 
 
var app_module_1 = require('./app.module'); 
 
var platform_browser_dynamic_1 = require('@angular/platform-browser-dynamic'); 
 
platform_browser_dynamic_1.platformBrowserDynamic().bootstrapModule(app_module_1.AppModule); 
 
//# sourceMappingURL=main.js.map

回答

0

打开控制台,然后第一次读你的错误日志。

bootstrap阵列和declarations阵列不应该包括这一个Ng2SmartTableModule

请阅读此第一:

NgModule是一个装饰函数,采用一个单一的元数据对象 ,其属性描述该模块。最重要的属性 是:

declarations - 属于此模块的视图类。角 有三种查看类别:components,directivespipes

exports - 在其他模块的组件模板中应该可见并可用的声明子集 。

imports - 组件需要导出类的其他模块 模块中声明的模板。

providers - 此模块为全球服务集合提供服务的创建者;他们可以在应用程序的所有部分 访问。

bootstrap - 主应用程序视图,称为根组件,即 主机的所有其他应用程序的观点。只有根模块应该设置这个 引导属性。

https://angular.io/guide/architecture

+0

请参阅更新的详细信息 – Sarat