Question

设置 - ＆＃34; angular2＆＃34;：＆＃34; 2.0.0-beta.7＆＃34; ＆＃34; primeng＆＃34;：＆＃34; ^ 4.1.0-rc.2＆＃34;，

的package.json

＆＃13;

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.7",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "font-awesome": "^4.7.0",
    "primeng": "^4.1.0-rc.2",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "systemjs": "0.19.22",
    "zone.js": "0.5.15"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "typescript": "^1.7.5"
  }
}

＆＃13;

的index.html

＆＃13;

<html>

  <head>
    <title>Angular 2 QuickStart</title>

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <script src="node_modules/angular2/bundles/http.dev.js"></script>     

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/omega/theme.css" />
    <link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />
    <link rel="stylesheet" type="text/css" href="/node_modules/font-awesome/css/font-awesome.min.css" />
    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
         }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <base href="/">
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

＆＃13;

组件显示表，请参阅此处导入的DataTableModule 没有保持程序简单的服务

ngtable.component.ts

＆＃13;

import {Component} from 'angular2/core';
import {DataTableModule,SharedModule,PaginatorModule} from 'primeng/primeng';
import {ButtonModule} from 'primeng/primeng';
import { OnInit } from "angular2/src/core/linker";
var __moduleName;
@Component(
    {
        selector: 'ng-table',
        moduleId: __moduleName,
        templateUrl: './ngtable.component.html',
        directives: []
    }
)
export class NGTableComponent {
    cols: any[];
    posts: {id: number,userId: number, title: string}[] = [
        {"id": 0, "userId": 0, "title": "My title"}
    ];
}

＆＃13;

与组件

对应的HTML页面

ngtable.component.html

＆＃13;

    <h2>This is PrimeNG data table</h2>
    <p-dataTable [value]="posts" [rows]="10" [loading]="loading">
        <p-header>Product List</p-header>
        <p-column [field]="id" [header]="id"></p-column>
    </p-dataTable>

＆＃13;

boot.ts到bootstrap应用程序

＆＃13;

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {ROUTER_PROVIDERS} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {JSONP_PROVIDERS} from 'angular2/http';


bootstrap(AppComponent[ROUTER_PROVIDERS,HTTP_PROVIDERS,JSONP_PROVIDERS]);

＆＃13;

Answer 1

您必须在 app.module.ts 文件中引导primeng模块，然后才能在任何组件中使用它们。

import { NgModule }      from '@angular/core';
import { FormsModule }      from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent }  from './app.component';
import { DataTableModule}  from 'primeng/primeng';

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, FormsModule, DataTableModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

这样我们就不必在每个组件中导入模块了。

即使在导入DataTableModule之后，PrimeNG数据表也不以角度2显示

1 个答案: