如何将自定义nb-select组件的选中数据传递给ng2-smart-table

ng2-smart-table的自定义编辑器组件有固定的交互规则：表格会向自定义组件传入当前单元格初始值、当前行数据两个输入属性，自定义组件值变更时，需要通过指定输出方法向表格回传新值，表格才会同步更新行数据。
你当前的代码没有对接这套交互规则：注释掉了接收初始值的@Input() value，值变更时也没有向表格发送通知，所以选中数据只能存在NbListComponent实例内部，无法同步到表格主组件。

1. 修改NbListComponent逻辑代码 #

补充输入输出装饰器，对接表格的交互接口，初始化时回显已有值，变更时回传新值：

import { Component, Input, OnInit, Output, EventEmitter } from "@angular/core";
import { Apollo } from "apollo-angular";
import { UserService } from "../user/user.service";

@Component({
  selector: "ngx-nb-list",
  templateUrl: "./nb-list.component.html",
  styleUrls: ["./nb-list.component.scss"],
})
export class NbListComponent implements OnInit {
  listOfTpeNoneBinded;
  selectedlist;
  // 接收表格传入的当前单元格值
  @Input() value;
  // 接收表格传入的当前行完整数据
  @Input() rowData: any;
  // 值变更时通知表格更新的输出通道
  @Output() onEdited: EventEmitter<any> = new EventEmitter();

  constructor(private apollo: Apollo, private userService: UserService) {}

  ngOnInit(): void {
    // 初始化时回显已有选中值
    this.selectedlist = this.value || [];
    this.getNoBinded();
  }
  change(event) {
    console.log(event);
    // 选中项变化时，把新值回传给表格
    this.onEdited.emit(event);
  }
    
  getNoBinded() {
    this.apollo
      .query<any>({ query: this.userService.getNoBinded() })
      .subscribe(({ data }) => {
        console.log("getNoBindedTPE", data);
        this.listOfTpeNoneBinded = data.getNoBindedTPE;
      });
  }
}

2. 调整列配置 #

修正列的显示逻辑，去掉无效的配置项：

bindedSn: {
  title: "bindedSn",
  // 非编辑状态下，把多选的数组值拼接成字符串显示
  valuePrepareFunction: (cell, row) => {
    return Array.isArray(cell) ? cell.join(', ') : cell;
  },
  editor: {
    type: "custom",
    component: NbListComponent,
  },
},

注意：如果使用Angular 9以下版本，需要把NbListComponent注册到对应模块的entryComponents数组中，否则表格无法动态创建该组件。

3. 模板代码无需改动 #

你当前的nb-select模板绑定逻辑正常，不需要调整。

修复后：

• 进入单元格编辑状态时，nb-select会自动回显已绑定的SN值
• 切换选中项时，表格对应单元格的值会实时同步
• 提交/获取表格行数据时，直接读取行的bindedSn字段就能拿到选中的SN数组，不需要额外访问组件内部属性

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