2017-06-19 84 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