如何从 http 请求将数据传递给 ng2-smart-table renderComponent？答案

【问题标题】：how to pass data to ng2-smart-table renderComponent from http request?如何从 http 请求将数据传递给 ng2-smart-table renderComponent？
【发布时间】：2019-10-30 16:22:25
【问题描述】：

我有一个表格，其中包含一个单元格中的自定义组件和一个为我提供一些数据来显示的服务。我的自定义组件实现了选择。因此，表格的列如下所示：

userRole: {
title: 'User Role,
type: 'custom',
renderComponent: SelectComponent,
onComponentInitFunction: (instance) => {
instance.selectEdit
.subscribe( (data) => {
console.log(data);
});
}
  },

select.component.html：

<select #select
        (change)="callType(select.value)"
>
  <option *ngFor="let option of options"
          attr.value="option.id" >{{option.name}}</option>
</select>

select.component.ts：

export class SelectComponent implements OnInit, OnChanges, ViewCell {
@Input() value: string | number;
@Input() rowData: any;
@Input() options;
@Output() selectEdit = new EventEmitter();

constructor() {
}

ngOnInit() {
}

ngOnChanges(changes: SimpleChanges): void {

}

callType(event) {
this.selectEdit.emit(event);
}

  }

似乎instance 对象应该具有options 属性（因为它在@Input 下），但它没有:( 我试过类似的东西 https://github.com/akveo/ng2-smart-table/issues/521#issuecomment-333273103 但它对我不起作用，因为我需要来自 Observable 的数据。

【问题讨论】：

标签： angular ng2-smart-table

【解决方案1】：

棘手的解决方案： 在使用表格渲染组件之前为SelectComponent 准备数据。 container.component.ts：

  ngOnInit() {
    this.userService.httpAllRoles()
      .subscribe((roles: Role[]) => {
        this.roles = roles;
      });
  }

container.component.html：

<div *ngIf="roles">
  <app-table [roles]="roles"></app-table>
</div>

然后通过valuePrepareFunction向内部组件传递数据 table.component.ts：

      userRole: {
        title: 'userRole,
        filter: false,
        type: 'custom',
        valuePrepareFunction: (value, row, cell) => {
          // DATA FROM HERE GOES TO renderComponent
          return this.roles;
        },
        renderComponent: SelectComponent,
        onComponentInitFunction: (instance) => {
          instance.selectEdit
            .subscribe( (data) => {
              console.log(data);
            });
        }
      },

在 SelectComponent 中接收数据：

export class SelectComponent implements OnInit, ViewCell {
  @Input() value; // data from table
  @Input() rowData;

【讨论】：