文章/答案/技术大牛

发布

社区首页 >问答首页 >如何从Hilla应用程序重构vaadin网格中的数组？

问如何从Hilla应用程序重构vaadin网格中的数组？
EN

Stack Overflow用户

提问于 2022-11-13 15:05:51

回答 2查看 27关注 0票数 0

在vaadin网格单元格中显示数组的最佳方法是什么？

我在springboot中建模了这样的值列表。

private List<String> responsibilities;

如果职责包含“割草”、“洗碗”、“干净的地板”，我想将其作为单元格中的“子弹列表”：

剪草
洗碗机
清洁地板

对不起，我的打字技巧很差。

检查了文档和示例，并尝试了单元格呈现，但不太清楚如何设置数组显示。

此尝试导致异常错误:无效绑定模式！

import '@vaadin/grid';
import { columnBodyRenderer } from '@vaadin/grid/lit.js';
import type { GridColumnBodyLitRenderer } from '@vaadin/grid/lit.js';
import { html } from 'lit';
import { Binder, field } from '@hilla/form';
import { customElement, state } from 'lit/decorators.js';
import { View } from '../../views/view';
import Career from 'Frontend/generated/com/example/application/models/Career';
import CareerModel from 'Frontend/generated/com/example/application/models/CareerModel';
import { getCareers } from 'Frontend/generated/CareerEndpoint';

@customElement('career-view')
export class CareerView extends View {

    @state()
    private careers: Career[] = [];
    private binder = new Binder(this, CareerModel);

    async firstUpdated() {
        this.careers = await getCareers();
    }

    render() {
      return html`
        <div>
          <vaadin-grid theme="wrap-cell-content" .items=${this.careers}>
            <vaadin-grid-column path="title"> </vaadin-grid-column>
            <vaadin-grid-column path="aliases"> </vaadin-grid-column>
            <vaadin-grid-column path="description"> </vaadin-grid-column>
            <vaadin-grid-column
               header="Responsibility"
                  ${columnBodyRenderer(this.responsibilityRenderer, [])}
            ></vaadin-grid-column>
            <vaadin-grid-column path="experience"> </vaadin-grid-column>
          </vaadin-grid>
        </div>
      `;
     }

    responsibilityRenderer: GridColumnBodyLitRenderer<Career> = (this.careers) => {
        return html`
          <ul>
            ${careers.responsibilities.map(r => html`
              <li>${r}</li>
            `)}
          </ul>
        `;
      };

}

vaadin-grid

hilla

回答 2

Stack Overflow用户

发布于 2022-11-14 00:56:48

您正在正确的轨道上使用单元格渲染器。见这里的文档：https://vaadin.com/docs/latest/components/grid/#content

在Lit绑定中允许使用TypeScript代码，因此您可以使用array.map函数在数组上迭代并生成列表或重复元素。

您的呈现器方法应该如下所示：

responsibilityRenderer: GridColumnBodyLitRenderer<Person> = (person) => {
    return html`
      <ul>
        ${person.responsibilities.map(r => html`
          <li>${r}</li>
        `)}
      </ul>
    `;
  };

票数 1

Stack Overflow用户

发布于 2022-11-14 13:37:46

注意使用未定义和'?‘的类型记录未定义消息的篡改。在不同的地点。数据显示“确定”，现在没有控制台错误。

感谢马库斯和塔图的帮助！

import '@vaadin/grid';
import { columnBodyRenderer } from '@vaadin/grid/lit.js';
import type { GridColumnBodyLitRenderer } from '@vaadin/grid/lit.js';
import { html } from 'lit';
import { Binder, field } from '@hilla/form';
import { customElement, state } from 'lit/decorators.js';
import { View } from '../../views/view';
import Career from 'Frontend/generated/com/example/application/models/Career';
import CareerModel from 'Frontend/generated/com/example/application/models/CareerModel';
import { getCareers } from 'Frontend/generated/CareerEndpoint';

@customElement('career-view')
export class CareerView extends View {

    @state()
    private careers: (Career | undefined)[] = [];

    async firstUpdated() {
        this.careers = await getCareers();
    }

    render() {
      return html`
        <div>
          <vaadin-grid theme="wrap-cell-content" .items=${this.careers}>
            <vaadin-grid-column path="title"> </vaadin-grid-column>
            <vaadin-grid-column path="aliases"> </vaadin-grid-column>
            <vaadin-grid-column path="description"> </vaadin-grid-column>
            <vaadin-grid-column
               header="Responsibility"
                  ${columnBodyRenderer(this.responsibilityRenderer, [])}
            ></vaadin-grid-column>
            <vaadin-grid-column path="experience"> </vaadin-grid-column>
          </vaadin-grid>
        </div>
      `;
     }

    responsibilityRenderer: GridColumnBodyLitRenderer<Career> = (item, _model, column) => {
        return html`
           ${item?.responsibilities?.map(r => html`
              <li>${r}</li>
            `)}
        `;
      };
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74422127

复制

相似问题

问如何从Hilla应用程序重构vaadin网格中的数组？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从Hilla应用程序重构vaadin网格中的数组？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从Hilla应用程序重构vaadin网格中的数组？
EN