我有一个表格,在一个单元格中有一个自定义组件和一个为我提供一些要显示的数据的服务。 我的自定义组件实现了选择。 因此,表的列如下所示:
userRole: {
title: 'User Role,
type: 'custom',
renderComponent: SelectComponent,
onComponentInitFunction: (instance) => {
instance.selectEdit
.subscribe( (data) => {
console.log(data);
});
}
},
选择.component.html:
<select #select
(change)="callType(select.value)"
>
<option *ngFor="let option of options"
attr.value="option.id" >{{option.name}}</option>
</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 的数据。
最佳答案
棘手的解决方案:
在使用表格渲染组件之前为 SelectComponent
准备数据。
容器.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
向内部组件传递数据
表.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;
关于angular - 如何从 http 请求将数据传递给 ng2-smart-table renderComponent?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58609812/