用于字符串数组的 vaadin-grid-filter 不起作用

Question

我正在使用带有 Polymer 2.x 的 vaadin-grid-filter，我面临以下问题。
我有一个 vaadin-grid-column 如下，

<vaadin-grid-column width="15em">
        <template class="header">
            <vaadin-grid-filter aria-label="Inventory" path="" value="[[_filterItems]]">
                <vaadin-text-field slot="filter" placeholder="Item" value="{{_filterItems}}" focus-target></vaadin-text-field>   
            </vaadin-grid-filter>
        </template>
    <template>[[item]]</template>
</vaadin-grid-column>

[[item]]是一个字符串数组，当 path 时过滤不起作用设置为空字符串。
如果我将每个字符串放在一个 Json 对象中并按照文档中的方式访问它，那么它可以正常工作。
但我想知道是否有一种方法可以按原样过滤它。

先感谢您。

Answer 1

我对 vaadin-grid 源代码进行了一些挖掘，发现了一些不太理想的答案。不幸的是，path 似乎没有任何“神奇”的占位符。在为 [[item]] 使用“x-array-data-provider”组件的上下文中，它将为您提供所需的属性值.以下是我尝试的几个值及其结果:

"": 过滤机制尝试检索 item[""]字符串比较的属性。不幸的是 item[""]将是未定义的，并且比较将无法匹配。

null/undefined :在逻辑中很早就对此进行了检查，这将中止整个过滤过程。

所以不幸的是，由于默认 JS 对象中缺少任何自引用对象属性(我知道)，我无法以某种方式绕过属性访问器来获得你想要的东西。

但是，我确实在使用服务器数据提供程序的情况下找到了一种潜在的解决方法。使用 vaadin-grid-filter 示例(来自 vaadin)here ，看起来好像过滤请求可以序列化并发送到服务器。如果您可以完全控制远程服务器数据提供程序代码的内部，那么您可以在那里编写自己的自定义过滤机制来完成您想要的。这是示例中的代码(以防删除):

<x-remote-filtering-example></x-remote-filtering-example>
<dom-module id="x-remote-filtering-example">
  <template>
    <vaadin-grid aria-label="Filtering with Data Provider Example" id="grid">

      <vaadin-grid-column width="50px" flex-grow="0">
        <template class="header">#</template>
        <template>[[index]]</template>
      </vaadin-grid-column>

      <vaadin-grid-column>
        <template class="header">
          <vaadin-grid-filter aria-label="Fist Name" path="firstName" value="[[_filterFirstName]]">
            <input placeholder="First Name" value="{{_filterFirstName::input}}" focus-target>
          </vaadin-grid-filter>
        </template>
        <template>[[item.firstName]]</template>
      </vaadin-grid-column>

      <vaadin-grid-column>
        <template class="header">
          <vaadin-grid-filter aria-label="Last Name" path="lastName" value="[[_filterLastName]]">
            <input placeholder="Last Name" value="{{_filterLastName::input}}" focus-target>
          </vaadin-grid-filter>
        </template>
        <template>[[item.lastName]]</template>
      </vaadin-grid-column>

    </vaadin-grid>
  </template>
  <script>
    addEventListener('WebComponentsReady', function() {
      Polymer({
        is: 'x-remote-filtering-example',

        ready: function() {
          var grid = this.$.grid;

          grid.size = 200;

          grid.dataProvider = function(params, callback) {
            var xhr = new XMLHttpRequest();
            xhr.onload = function() {
              var response = JSON.parse(xhr.responseText);

              // Number of items changes after filtering. We need
              // to update the grid size based on server response.
              grid.size = response.size;

              callback(response.result);
            };

            var index = params.page * params.pageSize;
            var url = 'https://demo.vaadin.com/demo-data/1.0/people?index=' + index + '&count=' + params.pageSize;

            // `params.filters` format: [{path: 'lastName', direction: 'asc'}, ...];
            params.filters.forEach(function(filter) {
              url += '&filters[' + filter.path + ']=' + encodeURIComponent(filter.value);
            });

            xhr.open('GET', url, true);
            xhr.send();
          };
        }
      });
    });
  </script>
</dom-module>