(点击)事件在角度为5

时间:2018-09-10 18:25:22

标签: angular

我正面临dataTable中FixedColumns上的(单击)角度事件的问题。当列固定或冻结角5单击事件不起作用。但是,如果列不是固定的或冻结的,它将起作用。任何人都面临类似的问题或知道相同的解决方案吗?

我在代码中使用[https://l-lin.github.io/angular-datatables/]数据表。这是我的component.ts和html文件

ngOnInit() {
    this.dtOptions =  {  
      pagingType: 'full_numbers' ,
      paging : true,
      searching : true,
      processing: false,
      responsive: false,
      scrollX:true,
      scrollY:'250px',
      scrollCollapse:true,
      fixedColumns:   {
        leftColumns: 1,
        rightColumns: 1
      },
      columnDefs: [ 
        {
          "searchable": false,
          "orderable": false,
          "targets": [0, 1]  
        }
      ],
      order: [[2, 'asc']],
   };

  this.dataMgmtService.getWorksheetData(0).subscribe(response => {
        this.serviceOrderData = response;
        if(this.serviceOrderData[0]) {
          this.tableHeaders = this.objectKeys(this.serviceOrderData[0]);
          console.log(this.objectKeys(this.serviceOrderData[0]));
          console.log(this.serviceOrderData[0]);
          this.dtTrigger.next();
        } 
      },
      error => this.errorMessage = <any>error, 
    ); 
  }

hideShowRow(event){ 
    alert('Not getting called');
    this.getDatableRowFromTR(event.target.parentElement.parentElement.parentElement);

  }

HTML文件

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger"  class="row-border hover">
  <thead>
    <tr>
      <th style="background-color: #fff;">&nbsp;</th>
      <th style="background-color: #fff;"><input type="checkbox"/></th>
      <th style="background-color: #fff;" *ngFor="let tableHead of tableHeaders">{{tableHead | uppercase }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of serviceOrderData; let i = index" >
      <td><a #input class="detail-icon" href="javascript:;" (click)="hideShowRow($event)"> <i class="fa fa-plus"></i></a></td>
      <td style="text-align: center;"><input type="checkbox"/></td>
      <td *ngFor="let col of objectValues(row); let j = index">{{ col }}</td>
    </tr>
  </tbody>
</table>

enter image description here

0 个答案:

没有答案