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