Angular 如何处理双击共价数据表

在放弃使用角度/材料数据表之后，我最近开始使用Teradata共价数据表。。。我试图处理双击datatable的特定行，但不知道从哪里开始。如果表是在typescript中定义的，那么如何访问行数据并向其添加（dblclick）输出

my code:

my html:

<td-data-table #dataTable [data]="filteredEmployees" [columns]="columns" [sortable]="true" [sortBy]="sortBy" [sortOrder]="sortOrder" (sortChange)="sort($event)"></td-data-table> 

my typescript:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';

import { TdDataTableService, TdDataTableSortingOrder, ITdDataTableSortChangeEvent, ITdDataTableColumn } from '@covalent/core';
import { IPageChangeEvent } from '@covalent/core';

import { RestService } from '../../services/rest.service';
import { IEmployee } from '../../interfaces/employee.interface';

import { StringToDatePipe } from '../../pipes/string-to-date.pipe';

@Component({
  selector: 'app-cashier-maintenance',
  templateUrl: './cashier-maintenance.component.html',
  styleUrls: ['./cashier-maintenance.component.css']
})
export class CashierMaintenanceComponent implements OnInit {
    @ViewChild('filterTbl') filterTbl: ElementRef;
    employees: IEmployee[];
    filteredEmployees: IEmployee[];
    filteredTotal: number = 100;
  columns: ITdDataTableColumn[] = [
  { name: 'EMP_ID', label: 'ID', sortable: true, width: 100 },
  { name: 'EMP_NM', label: 'Name', sortable: true, width: 200 },
  { name: 'EMP_TYP', label: 'Type', sortable: true, width: 200 },
  { name: 'TEL', label: 'Telephone', sortable: true, width: 200 },
  { name: 'ADDR', label: 'Address', sortable: true, width: 200 },
  { name: 'DT_STRT', label: 'Start Date', sortable: false, width: 200 }
];
searchTerm: string = '';
sortBy: string = 'EMP_NM';
fromRow: number = 1;
currentPage: number = 1;
pageSize: number = 10;
  sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Ascending;



  constructor(private _dataTableService: TdDataTableService, private restService: RestService)  { }

    sort(sortEvent: ITdDataTableSortChangeEvent): void {
        this.sortBy = sortEvent.name;
        console.log(sortEvent.name);
        this.filter();
    }

    search(searchTerm: string): void {
        this.searchTerm = searchTerm;
        this.filter();
    }

    page(pagingEvent: IPageChangeEvent): void {
        this.fromRow = pagingEvent.fromRow;
        this.currentPage = pagingEvent.page;
        this.pageSize = pagingEvent.pageSize;
        this.filter();
    }

    filter(): void {
        let newData: IEmployee[] = this.employees;
        let excludedColumns: string[] = this.columns
            .filter((column: ITdDataTableColumn) => {
                return ((column.filter === undefined && column.hidden === true) ||
                (column.filter !== undefined && column.filter === false));
            }).map((column: ITdDataTableColumn) => {
            return column.name;
        });
    newData = this._dataTableService.filterData(newData, this.searchTerm, true, excludedColumns);
    this.filteredTotal = newData.length;
    newData = this._dataTableService.sortData(newData, this.sortBy, this.sortOrder);
    newData = this._dataTableService.pageData(newData, this.fromRow, this.currentPage * this.pageSize);
    this.filteredEmployees = newData;
  }






  getEmployees() {
      this.restService.getEmployees() 
    .subscribe(
    (res) => {
        console.log(res);       
        this.employees = res;
        this.employees.forEach((emp: IEmployee) => {
            emp.DT_STRT = new StringToDatePipe().transform(emp.DT_STRT);
        });
        this.filter();
    }, (err) => {
        console.log(err);
    });
  }

  ngOnInit() {
         Observable.fromEvent(this.filterTbl.nativeElement, 'keyup')
        .debounceTime(150)
        .distinctUntilChanged()
        .subscribe(() => {
          this.searchTerm = this.filterTbl.nativeElement.value;
          this.filter();
        });

      this.getEmployees();
  }

}

我的代码：
我的html：
我的打字稿：
从“@angular/core”导入{Component，OnInit，ViewChild，ElementRef}；
从“rxjs/Observable”导入{Observable}；
导入'rxjs/add/operator/debounceTime'；
导入'rxjs/add/operator/distinctUntilChanged'；
从“@covalent/core”导入{TdDataTableService，TdDataTableSortingOrder，ITdDataTableSortChangeEvent，ITdDataTableColumn}；
从“@covalent/core”导入{IPageChangeEvent}；
从“../../services/rest.service”导入{RestService}；
从“../../interfaces/employee.interface”导入{IEEmployee}；
从“../../pipes/string to date.pipe”导入{StringToDatePipe}；
@组成部分({
选择器：“应用程序出纳维护”，
templateUrl:“./cashier maintenance.component.html”，
样式URL:['./cashier maintenance.component.css']
})
导出类出纳维护组件在NIT上实现{
@ViewChild（'filterTbl'）filterTbl:ElementRef；
员工：i员工[]；
筛选员工：员工[]；
过滤器总数：数量=100；
列：ITdDataTableColumn[]=[
{name:'EMP_ID'，label:'ID'，sortable:true，width:100}，
{name:'EMP_NM'，label:'name'，sortable:true，width:200}，
{name:'EMP_TYP'，label:'Type'，sortable:true，width:200}，
{name:'TEL'，label:'Telephone'，可排序：true，宽度：200}，
{name:'ADDR'，label:'Address'，sortable:true，width:200}，
{name:'DT_STRT'，label:'Start Date'，sortable:false，width:200}
];
searchTerm:string=''；
sortBy:string='EMP_NM'；
fromRow:number=1；
当前页面：编号=1；
页面大小：数字=10；
排序器：TdDataTableSortingOrder=TdDataTableSortingOrder.升序；
构造函数（private _dataTableService:TdDataTableService，private restService:restService）{}
排序（sortEvent:ITdDataTableSortChangeEvent）：无效{
this.sortBy=sortEvent.name；
控制台日志（sortEvent.name）；
这个.filter（）；
}
搜索（搜索词：字符串）：无效{
this.searchTerm=searchTerm；
这个.filter（）；
}
页面（分页事件：IPageChangeEvent）：无效{
this.fromRow=pagingEvent.fromRow；
this.currentPage=pagingEvent.page；
this.pageSize=pagingEvent.pageSize；
这个.filter（）；
}
filter（）：void{
让newData:ieemployee[]=this.employees；
让excludedColumns:string[]=this.columns
.filter（（列：ITdDataTableColumn）=>{
返回（（column.filter==undefined&&column.hidden==true）||
（column.filter！==未定义&&column.filter===false））；
}).map（（列：ITdDataTableColumn）=>{
返回column.name；
});
newData=this.\u dataTableService.filterData（newData，this.searchTerm，true，excludedColumns）；
this.filteredTotal=newData.length；
newData=this.\u dataTableService.sortData（newData，this.sortBy，this.sortOrder）；
newData=this.\u dataTableService.pageData（newData，this.fromRow，this.currentPage*this.pageSize）；
this.filteredEmployees=新数据；
}
getEmployees（）{
this.restService.getEmployees（）
.订阅(
（res）=>{
控制台日志（res）；
这是1.employees=res；
this.employees.forEach（（emp:ieemployee）=>{
emp.DT_STRT=新StringToDatePipe（）.transform（emp.DT_STRT）；
});
这个.filter（）；
}，（错误）=>{
控制台日志（err）；
});
}
恩戈尼尼特（）{
可观察的.fromEvent（this.filterTbl.nativeElement，'keyup'）
.debounceTime（150）
.distinctUntilChanged（）
.订阅（（）=>{
this.searchTerm=this.filterTbl.nativeElement.value；
这个.filter（）；
});
这个.getEmployees（）；
}
}

目前，Teradata共价数据表不支持双击事件。团队建议使用按钮或图标进行辅助操作。这是因为双击是一种桌面模式，不适合移动设备

---

有关数据表双击事件的讨论，请参阅。

目前，Teradata共价数据表不支持双击事件。团队建议使用按钮或图标进行辅助操作。这是因为双击是一种桌面模式，不适合移动设备

---

有关数据表双击事件的讨论，请参阅。

能否添加指向该表的链接或在该表中使用操作按钮的小示例？我很困惑我该怎么做，因为表主要是在ts/组件代码中定义的？我也不能使用原子组件，因为我需要对表进行排序/过滤/分页。上的第一个示例使用了一个按钮。您应该能够在模板中标记任何可排序的列。该示例不使用原子组件吗？据我所知，当使用原子组件时，过滤/排序/分页是不可能的？请添加一个链接或一个在表中使用操作按钮的小示例，好吗？我很困惑我该怎么做，因为表主要是在ts/组件代码中定义的？我也不能使用原子组件，因为我需要对表进行排序/过滤/分页。上的第一个示例使用了一个按钮。您应该能够在模板中标记任何可排序的列。该示例不使用原子组件吗？据我所知，使用原子组件时不可能进行过滤/排序/分页？