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

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

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

返回的内容

Answer 2

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

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

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


}

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

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

2 个答案: