angular alain框架st表格通过ng-template自定义列实现表格中添加下拉框

实现效果如图所示：

首先~~在ts中columns中添加render属性，如下：

columns: STColumn[] = [
    { title: '编号', index: 'id' },
    { title: '邮箱', index: 'email' },
    { title: '电话', index: 'email',render:'custom'},
    {
      title: '操作',
      buttons: [
        {
          text: 'btn',
          type: 'link',
          click: (e: any) => console.log('btn click', e),
        },
      ],
    },
  ];

然后就是在html页面中添加ng-template，ng-template是Angular 结构型指令中的一种，用于定义模板渲染HTML(模板加载)。

<st [data]="dataset"
    [req]="{params: params}" [columns]="columns">
    <ng-template #selectkuang st-row="custom" let-item let-index="index" let-column="column">
        <nz-select style="width: 120px;" [ngModel]="'lucy'">
          <nz-option nzValue="01" nzLabel="Lucy1"></nz-option>
          <nz-option nzValue="02" nzLabel="Lucy2"></nz-option>
          <nz-option nzValue="03" nzLabel="Lucy3"></nz-option>
        </nz-select>
    </ng-template>
</st>

ts中的render属性的值要与ng-template标签的st-row属性值对应，这样就会把相应ng-template中的html代码加载到对应了列中了。