@handsontable/angular：如何使用热列创建自动完成或可动手操作的类型

Posted 2023-03-22

【中文标题】@handsontable/angular：如何使用热列创建自动完成或可动手操作的类型

【英文标题】：@handsontable/angular: how to create autocomplete or handsontable type with hot-column

【发布时间】：2019-01-25 19:06:59

【问题描述】：

我应该使用热列创建一个自动完成或 HOT-in-HOT。比如这样。

<hot-table>
  <hot-column type="handsontable" data="code_id">
    <hot-table [data]="codes" [autoColumnSize]="true">
      <hot-column data="id" [renderer]="codesRenderer.bind(this)"></hot-column>
    </hot-table>
  </hot-column>
</hot-table>

虽然它不适用于 @handsontable/angular 包，但适用于设置对象 -> 列。像这样：

        data: 'author_id',
        title: 'Author',
        editor: AuthorEditor,
        type: 'handsontable',
        handsontable: 
          data: this.authorService.getAuthors(),
          autoColumnSize: true,
          columns: [
            
              data: 'id',
              renderer: (instance, TD, row) => 
                const author: Author = instance.getSourceDataAtRow(row);
                TD.innerText = `$author.first_name $author.last_name`;
              
            
          ],
          getValue() 
            var selection = this.getSelected();

            return this.getSourceDataAtRow(selection[0]).id;
          
        ,
        renderer: (instance, TD, row, col, prop, value, cellProperties) => 
          const author = this.authorService.getAuthorById(parseInt(value, 10));

          if (!author) 
            return;
          

          TD.innerText = `$author.first_name $author.last_name`;
        ,
      

我更喜欢使用<hot-column></hot-column> 而不是设置对象。如何使用<hot-column> 创建handsontable 类型？

【参考方案1】：

在您的模板中获得基本的自动完成功能可能看起来像这样

<hot-table>
    <hot-column type="autocomplete"
                [source]="['somevalues','here']"
                [strict]="true/false"
    >
    </hot-column>
</hot-table>

然后，像往常一样传入数据。

注意：绑定到这些属性会影响性能，尤其是在大于 2000 个单元格的表格中。使用设置对象将比绑定更优化。

【讨论】：

这不是我想要的。这样，我应该将我的数据映射到字符串数组，而不是使用对象数组。

你应该可以用handsontable类型做类似的事情。 @handsontable/angular 的文档非常少。我首先尝试将属性（即[renderer]="myRendererFunc"）绑定到<hot-column>，然后看看会发生什么。