angular2 中的 vaadin-grid 集成。网格中的数据未显示

Question

我正在尝试在我的 angular2 application.According 中使用 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/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 中的数据未显示。谁能帮我解决这些问题？

谢谢

Answer 1

angular2-polymer 版本 1.0.0-beta1 中存在关于使用 Angular 2 UMD 包（现在是 Angular 2 快速启动项目中的默认设置）的问题。这已在最新的 1.0.0-beta2 版本中修复。

希望这有助于解决数据未显示的问题。

Answer 2

在加载 vaadin 网格之前添加此脚本。

<script>  window.Polymer = { dom: 'shadow' }</script>

angular2 中的 vaadin-grid 集成。网格中的数据未显示

vaadin-grid integration in angular2. Data present in the grid is not displaying

polymer

vaadin-grid

polymer-1.0

vaadin-elements

angular