0

我正在使用 Vaadin Flow，版本 22。我正在尝试集成一个 Web 组件，该组件具有需要一组对象的属性，并且这些对象使用 Javascript 日期。

为了给您一个想法，以下是您应该如何在 Javascript 环境中使用它：

import {LitElement, html} from 'lit';
import {customElement} from 'lit/decorators.js';
import '@third-party/third-party-element';

@customElement('new-element')
export class NewElement extends LitElement {
  render() {
    const data = [
        {value: "someValue1", date: new Date(2022,1,1)},
        {value: "someValue2", date: new Date(2022,1,2)}
    ];
    return html`
      <third-party-element data='${data}'></third-party-element>
    `;
  }
}

我还没有弄清楚如何将这种数据从 Java 代码传递到 LitElement。到目前为止，我坚持使用下面的代码（实际上，通过 Jackson 将我的数据编组为 JSON），但如果我尝试在其中使用日期，它将只是一个 ISO8601 字符串，而不是实际的 Javascript 日期。 .

package org.mycompany;

import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.dependency.NpmPackage;
import com.vaadin.flow.component.littemplate.LitTemplate;

@Tag("third-party-element")
@NpmPackage(value = "@third-party/third-party-element", version = "1.0.0")
@JsModule("@third-party/third-party-element/third-party-element.js")
public class ThirdPartyElement extends LitTemplate {

  public ThirdPartyElement() {
    getElement().setAttribute("data", "[{\"value\": \"someValue1\", \"date\": \"???\"}, {\"value\": \"someValue2\", \"date\": \"???\"}]");
  }
}

你能帮我弄清楚怎么做吗？

提前致谢 ！

编辑：在探索 Vaadin 代码后，我意识到没有内置的方法可以自动将我的数据解析为日期。所以我最终制作了一个扩展第三方类的 JS 类，并为其添加了一个方法setData，该方法将解析传入的 JSON 数据并将每个 ISO8601 字符串转换为日期，然后执行this.data = myNewData;. 并从我调用的Java中的相应组件

getElement().callJsFunction("setData", this.objectMapper.writeValueAsString(myData));
4

1 回答 1

0

在您的 Java 代码中，您应该能够使用以下方法将 ISO 字符串转换为 LocalDate：

LocalDate date = LocalDate.parse(isoString);
于 2022-02-17T18:49:41.237 回答