如何在Hilla应用的Vaadin Grid单元格中渲染数组为无序列表？

针对你的需求，核心是修复单元格渲染器的参数错误，并正确处理数组渲染逻辑。以下是完整的解决方案：

错误原因分析 #

你遇到的「ERROR: Invalid binding pattern」是因为两处关键错误：

• 渲染器函数错误地将组件的this.careers数组作为参数，而非当前行的单个Career对象
• 函数内部误用了未定义的careers变量，应该使用传入的单个数据项

修正后的代码 #

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>
      `;
     }

    // 修正渲染器参数，接收当前行的单个Career对象
    responsibilityRenderer: GridColumnBodyLitRenderer<Career> = (item) => {
        // 处理空数组/未定义的情况，避免map调用报错
        const responsibilities = item.responsibilities || [];
        return html`
          <ul>
            ${responsibilities.map(r => html`
              <li>${r}</li>
            `)}
          </ul>
        `;
      };

}

关键改进点 #

1. 参数修正：将渲染器的参数从this.careers改为item，确保获取当前行的单个数据对象
2. 空值防护：通过item.responsibilities || []处理数组未定义的情况，避免map方法调用报错
3. 数据引用修正：使用item.responsibilities访问当前行的职责数组，替换之前未定义的careers变量

这种方式是Vaadin Grid中渲染复杂数据结构的标准实践，通过自定义单元格渲染器完全控制内容展示形式，同时保证代码的稳定性和可维护性。

内容的提问来源于stack exchange，提问作者Melting Turret