0

我正在尝试使用嵌入在纸张标题面板元素中的 vaadin-grid 显示表格数据。数据应该来自 Rest 调用。使用的 Rest 客户端是，我将 last-response 属性与 vaadin-grid 的“items”属性绑定。当我使用 firebug 检查 HTML 时，我可以看到表格已正确创建，但在前端没有任何可见的内容。

下面是我的自定义元素：'aws-api-gateway-call' 

<template>
    <iron-ajax
        auto
        url="{{url}}"
        handle-as="json"
        last-response="{{handleResponse}}">
     </iron-ajax>

    <vaadin-grid items="{{handleResponse}}" selection-mode="multi">
        <table>
          <colgroup>
              <col name="fileName">
              <col name="titleName">
              <col name="artist">
              <col name="albumName">
              <col name="action">
          </colgroup>
          <thead>
            <tr>
              <th style="z-index: 10">MP3 File Name</th>
              <th>Title Name</th>
              <th>Artist Name</th>
              <th>Album Name</th>
              <th>Action</th>
            </tr>
            </thead>
        </table>
      </vaadin-grid>

</template>

<script>
    Polymer({
          is: "aws-api-gateway-call",

          properties : {
              hostname:{
                  value: 'test',
                  notify: true
              },
              stage:{
                  value: 'test',
                  notify: true
              },
              method:{
                  value: 'test',
                  notify: true
              },
              url:{
                  computed: 'computeUrl(hostname, stage, method)'
              }
          },              
          computeUrl: function(hostname, stage, method){
              console.log('URL to call-->' + [hostname, stage, method].join('/'))
              return [hostname, stage, method].join('/')
          }
        });
    </script>

而且，这是我的：

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>An Web-app to customize MP3 songs' metadata</title>
<link rel="shortcut icon" href="img/vector-black-ipod-10170961.jpg" />

    <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <script type="text/javascript" src="bower_components/prefixfree/prefixfree.js"></script>
    <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
    <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
    <link rel="import" href="elements/api_calls.html">
    <link rel="stylesheet" href="css/main.css">
</head>
<body class="fullbleed layout vertical">

        <paper-header-panel class="flex">
            <div class="paper-header ipodHeaderPanel">My Ipod Customizer Application</div>
            <div class="content">

                <aws-api-gateway-call 
                    hostname="https://<acct-id>.execute-api.us-west-2.amazonaws.com" 
                    stage="mp3file" 
                    method="MP3MetadataReadMicroService">                           
                </aws-api-gateway-call>

            </div>
        </paper-header-panel>


</body>
</html>

你能帮我理解这个问题吗？以及如何解决？

4

1 回答 1

0

我对纸张滚动标题面板和 vaadin-grid 有同样的问题。我为此找到了两个原因/解决方案：

  • 快速检查显示 page-scroll-header-panel 的高度为 0px。确保 pager-scroll-header-panel 高度为 100% 修复它：

    .max-height {
    height: 100%;
}

<paper-scroll-header-panel fixed class="max-height">
</paper-scroll-header-panel>

  • paper-scroll-header-panel 将创建一个 mainContainer div 和 height: with position:'absolute' 来放置它的内容（vaadin-grid 可能不喜欢）。如果高度不是您的问题，则尝试将 mainContainer 的位置覆盖为“相对”以进行诊断：

    #mainContainer.paper-scroll-header-panel {
    position: relative !important;
}

免责声明：尽量远离 !important 子句，它通常会对样式表的可维护性造成巨大的负面影响。首先仔细检查 mainContainer 因为 height:0 通常是这种事情的原因。

希望这可以帮助！

于 2016-09-23T03:17:32.423 回答