我正在尝试在我的angular2应用程序中使用vaadin网格。根据文档https://vaadin.com/docs/-/part/elements/angular2-polymer/tutorial-index.html。但是输出中没有显示Vaadin网格数据。
的index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 with Polymer Elements QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Polyfills -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<script src="node_modules/core-js/client/shim.min.js"></script>
<!-- JavaScript libraries -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- Styles -->
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="bower_components/paper-styles/color.html">
<link rel="import" href="bower_components/paper-styles/default-theme.html">
<link rel="import" href="bower_components/paper-styles/typography.html">
<link rel="import" href="bower_components/paper-styles/shadow.html">
<style is="custom-style">
body {
@apply(--layout-fullbleed);
@apply(--paper-font-body1);
background: var(--primary-background-color);
color: var(--primary-text-color);
}
</style>
<!-- Polymer Elements -->
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/app-layout/app-layout.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/vaadin-grid/vaadin-grid.html">
<link rel="import" href="bower_components/vaadin-date-picker/vaadin-date-picker.html">
<!-- SystemJS Configuration -->
<script src="systemjs.config.js"></script>
<script>
document.addEventListener('WebComponentsReady', function() {
System.import('app').catch(function(err){ console.error(err); });
});
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
的package.json
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/forms": "0.2.0",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/router": "3.0.0-beta.1",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.4",
"@vaadin/angular2-polymer": "^1.0.0-beta1",
"angular2-in-memory-web-api": "0.0.14",
"bootstrap": "^3.3.6",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"zone.js": "^0.6.12"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.0.4"
}
}
bower.json
{
"name": "my-project",
"description": "",
"main": "",
"authors": [
"Your Name"
],
"license": "ISC",
"homepage": "",
"private": true,
"ignore": [
"*/.",
"node_modules",
"bower_components",
"test"
],
"dependencies": {
"polymer": "Polymer/polymer#^1.4.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.3.1",
"iron-icons": "PolymerElements/iron-icons#^1.1.3",
"app-layout": "PolymerElements/app-layout#^0.9.0",
"paper-styles": "PolymerElements/paper-styles#^1.1.4",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.1.1",
"paper-input": "PolymerElements/paper-input#^1.1.11",
"vaadin-grid": "Vaadin/vaadin-grid#^1.1.0",
"vaadin-date-picker": "Vaadin/vaadin-date-picker#^1.1.0"
}
}
systemjs.config.js
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs',
'@vaadin': 'node_modules/@vaadin'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
'@vaadin/angular2-polymer': { main: 'index.js', defaultExtension: 'js' }
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
应用程序/ app.component.js
import { Component } from '@angular/core';
import { PolymerElement } from '@vaadin/angular2-polymer';
@Component({
selector: 'my-app',
template: `
<vaadin-grid>
<table>
<colgroup>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th>Progress</th>
</tr>
</thead>
<tbody>
<tr>
<td>Project A</td>
<td>10000</td>
<td>0.8</td>
</tr>
<tr>
<td>Project B</td>
<td>999999</td>
<td>0.8</td>
</tr>
</tbody>
</table>
</vaadin-grid>
`,
styles: [`
vaadin-grid {
height: 100%;
}
`],
directives: [
PolymerElement('vaadin-grid')
]
})
export class AppComponent { }
根据文档我已对这些文件进行了更改，但是vaadin-grid中的数据未显示。 有谁可以帮我解决这些问题？
谢谢
答案 0 :(得分：1)
angular2-polymer版本1.0.0-beta1在使用Angular 2 UMD捆绑包时存在问题（现在是Angular 2 Quickstart项目中的默认设置）。这已在最新的1.0.0-beta2版本中修复。
希望这有助于数据不显示。
答案 1 :(得分：1)
在加载vaadin网格之前添加此脚本。
<script> window.Polymer = { dom: 'shadow' }</script>