ng2-smart-table列中的Click函数 [英] Click function in ng2-smart-table column

问题描述

我一直试图将单击功能包含在ng2-smart-table列中.似乎有角度(单击)事件和javascipt"onclick"未在表中呈现.代码在下面

I have been trying to get a click function to be included in a ng2-smart-table column. It seems angular (click) event and javascipt "onclick" do not get rendered in the table. The code is below

public settings = {
selectMode: 'single',  //single|multi
hideHeader: false,
hideSubHeader: false,
actions: {
  columnTitle: 'Actions',
  add: false,
  edit: false, // true,
  delete: false, // true,
  custom: false
},
noDataMessage: 'No data found',
columns: {
  IsComplete: {
    title:'Status',
    type:'html',
    filter: false,        
    valuePrepareFunction: (value) => {
      // return value===true ? 'Complete' : 'Pending';
      if(value===true){
        return  '<div class="text-nowrap text-success"><i class="fa fa-check-circle-o"> Complete</i></div>'; //  Complete';
        //return  'Complete';
      } else {
        //return  'Pending';
        return  '<div class="text-nowrap text-warning"><i class="fa fa-exclamation-circle"></i> Pending</div>'; //  Pending';
      }
    }
  },
  DateCreated: {
    title: 'Date created',
    type: 'string',
    filter: true,
    valuePrepareFunction: (date) => {
      var raw = new Date(date);
      var formatted = new DatePipe('en-EN').transform(raw, 'dd MMM yyyy');
      return formatted;
    }
  },      
  MemberName: {
    title: 'Member',
    type: 'string',
    filter: true
  },
  Start: {
    title: 'Start date',
    type: 'string',
    filter: false,
    valuePrepareFunction: (date) => {
      var raw = new Date(date);
      var formatted = new DatePipe('en-EN').transform(raw, 'dd MMM yyyy');
      return formatted;
    }
  },
  End: {
    title: 'End date',
    type: 'string',
    filter: false,
    valuePrepareFunction: (date) => {
      var raw = new Date(date);
      var formatted = new DatePipe('en-EN').transform(raw, 'dd MMM yyyy');
      return formatted;
    }
  },
  OrderId: {
    title: 'Details',
    type: 'html',
    filter: false,
    valuePrepareFunction: (OrderId) => {
      return  '<a onclick="onCustom($event)" href="/pages/order/' + OrderId + '"><i class="fa fa-search"></i> view</a>'; //  Complete';
    }
  }

下面要触发的感兴趣的列是"OrderId"事件，但是我还希望用户能够右键单击该链接并选择打开新标签"等，因此该链接以及单击功能

The column of interest is "OrderId" event to be fired is below, however I also want the user to be able to right-click the link and select open new tab, etc, hence the link as well as the click function.

onCustom(event) { this.router.navigateByUrl('/pages/order/' + event.data.OrderId); }

使用开发工具，我发现onclick或(click)被忽略了，而我得到的只是链接；

Using dev tools I see that the onclick or (click) is ignored and all I get is the link;

<a href="/pages/order/411"><i class="fa fa-search"></i> view</a>

更新:我还考虑过使用自定义操作列来利用被调用的"onCustom()"函数，但无法获取要呈现的valuePrepareFunction(仅获取"title" 属性渲染")或像这样引用"title"属性中的行数据.

Update: I have also thought of using a custom action column to take advantage of the "onCustom()"function called but have not been able to get valuePrepareFunction to be rendered (only get "title" property rendering) or reference the row data in the "title" property like so.

custom: [{
name: 'view',
title: 'View ',
type: 'html',
valuePrepareFunction:(row)=>{
  return `<a title="See Detail Product "href="Your api key or something/${row.OrderId}"> <i class="ion-edit"></i></a>`
},

} ]

推荐答案

使用valuePrepareFunction时，通过type = custom.尝试使用custom作为类型，而不是html

When you used valuePrepareFunction pass type=custom. Try with custom as a type instead of html

更新

您可以使用renderComponent功能.

type: 'custom',
valuePrepareFunction: (cell, row) => {
   return row.columnName;
},
renderComponent: NewComponent,

听到您必须组成一个组件，然后传入renderComponent.

Hear you have to make a one component and then pass in renderComponent.

component.ts

import { Component,Input, OnInit } from '@angular/core';
import { ViewCell } from 'ng2-smart-table';

@Component({
 selector: '',
 templateUrl: '',
 styleUrls: ['']
})
export class NewComponent implements ViewCell, OnInit {
  renderValue: string;
  @Input() value: string | number;
  @Input() rowData: any;

  constructor() { }

 ngOnInit() {
    this.renderValue = this.value.toString();
 }

 clicked(name){
   console.log(name);
 }

}

html文件

<span (click)="clicked(renderValue)">{{renderValue}}</span>

这篇关于ng2-smart-table列中的Click函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！