3

我正在使用 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。

4

2 回答 2

5

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

展示贷款

    //...
    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

于 2017-05-02T13:09:41.327 回答
0

您可能需要在您的类中定义一个对象，然后您可以在您的视图页面中访问。

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

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


}

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

于 2017-04-04T07:05:02.603 回答