Angular2智能表 - 将数据传递到自定义组件

Question

我正在使用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(){ 

    } 
} 

**注：ViewLoan组件被声明为entryComponent。

Answer 1

您可能需要在您的课堂中定义一个对象，然后才能在您的视图页面中进行访问。

data = [ // ... our data here ]; 
source: LocalDataSource; constructor() { 

    this.source = new LocalDataSource(this.data); 


} 

如果您仍有问题，请分享源代码。

Answer 2

您可以将单元格的值设置为任何您想要的值。就像这样：

ShowLoans

//... 
    columns: { 
     //... 
     actions: { 
      title: 'Acciones', 
      type: 'custom', 
      valuePrepareFunction: (cell, row) => row, 
      renderComponent: ViewLoan 
     } 
    } 
    //... 

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