我正在使用angular2,并试图为Smart Table中的每一行添加一个视图链接。我使用自定义类型来实现这一点,该类型允许我呈现自定义组件。
渲染过程工作得很好,但是现在我需要把数据(项目ID)传递给自定义组件,我不知道数据是如何发送给模板的,所以我不能访问它。
这是我的表组件:
export class ShowLoans {
query: string = '';
settings = {
actions: {
delete: false,
add: false
},
columns: {
//...
actions: {
title: 'Acciones',
type: 'custom',
renderComponent: ViewLoan
}
}
};
source: LocalDataSource = new LocalDataSource();
constructor(protected loanService: LoanService) {
this.loanService.getAllLoans().subscribe((data) => {
this.source.load(data.loans);
});
}
这是我的自定义组件:
@Component({
selector: 'viewloan',
templateUrl: './viewLoan.html'
})
export class ViewLoan {
public loan: Loan;
constructor(){
}
}
*Note:VIEW贷款组件被声明为一个入口组件。
最佳答案
您可以将单元格的值设置为任何您想要的值。这样地:
展示贷款
//...
columns: {
//...
actions: {
title: 'Acciones',
type: 'custom',
valuePrepareFunction: (cell, row) => row,
renderComponent: ViewLoan
}
}
//...
可视贷款
@Component({
selector: 'viewloan',
templateUrl: './viewLoan.html'
})
export class ViewLoan implements OnInit {
public value: Loan;
ngOnInit() {
console.log('Loan:', this.value);
console.log('Loan ID:', this.value.id);
}
}
注意
value
被设置为valuePrepareFunction
返回的值。