угловая (щелчок) не вызывает функцию в цикле

Question

Я пытаюсь создать таблицу с функцией редактирования ячейки.у меня есть массив данных ячейки.я перебираю массив и создаю кнопку с пиктограммой карандаша начальной загрузки.проверьте ниже шаблон

  <table datatable [dtOptions]="dtOptions" class="awidth row-border hover 
     display table table-bordered striped">
     <thead>
        <tr>
          <th *ngFor="let key of mycoloums" class="icon-margin" style="padding: 8px;">{{key.displayName}}</th>
        </tr>
    </thead>
    <tbody>
  <tr *ngFor="let gefield of gefields" class=" tab-font-size font-weight ">

    <td  *ngFor="let k of mycoloums"  class="tab-font-size font-weight" >
        <span  (focusout) ="saveDetails($event, gefield, k)">{{gefield[k.data]}}</span>
        <button *ngIf='k.edit == true' class='glyphicon glyphicon-pencil pull-right white' (click)="makeCellEdit($event)"></button>
       </div>
    </td>
  </tr>
  <tr *ngIf="gefields?.length == 0">
    <td colspan="3" class="no-data-available">No data!</td>
  </tr>
</tbody>

моя функция в файле ts

CellEdit(e) {console.log("cell edit")}

import { Component, OnInit, Input } from '@angular/core'; import { Http, Headers, RequestOptions } from '@angular/http'; import { HttpClient, HttpResponse } from '@angular/common/http';

class DataTablesResponse {   data: any[];   draw: number;   recordsFiltered: number;   recordsTotal: number;   coloumnName: {}; }

@Component({   selector: 'app-dynamic-datatable',   templateUrl: './dynamic-datatable.component.html',   styleUrls: ['./dynamic-datatable.component.css'] }) export class DynamicDatatableComponent implements OnInit {


 mycoloums =[
    { data: "check", displayName: "check", hyperlink: false, edit: true},
    { data: 'processID',displayName: "Process Id", hyperlink: false, edit: true }, 
    { data: 'processName', displayName: "Process Name", hyperlink: true, edit: true },
    { data: 'processDescription',displayName: "Process Description", hyperlink: true, edit: true}   ];

 gefields = [
    {
        "processID": 1,
        "versionPublishedOnDateTime": null,
        "processLastModifiedOnDateTime": null,
        "processVersion": "",
        "processDescription": "My Process",
        "processLastModifiedByUserID": null,
        "functionID": 1,
        "processName": "My Process"
    },
    {
        "processID": 2,
        "versionPublishedOnDateTime": null,
        "processLastModifiedOnDateTime": null,
        "processVersion": "",
        "processDescription": "My Process 2",
        "processLastModifiedByUserID": null,
        "functionID": 2,
        "processName": "My Process 2"
    },
    {
        "processID": 3,
        "versionPublishedOnDateTime": null,
        "processLastModifiedOnDateTime": null,
        "processVersion": "",
        "processDescription": "map process",
        "processLastModifiedByUserID": null,
        "functionID": 3,
        "processName": "map process"
    },
    {
        "processID": 4,
        "versionPublishedOnDateTime": null,
        "processLastModifiedOnDateTime": null,
        "processVersion": "",
        "processDescription": "dd Process",
        "processLastModifiedByUserID": null,
        "functionID": 3,
        "processName": "dd Process"
    } ];   dtOptions: DataTables.Settings = {};   showPopUp = false;

  constructor(private http: HttpClient) {
       }   ngOnInit(): void {
    console.log("_____________ngOnInit End____________");
    const that = this;

    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 4,

      columns: this.mycoloums,

    };   }

  makeCellEdit(e) {
    console.log("______makeCellEdit()_____");   } }

Я использую эту таблицу в качестве дочернего компонента.но когда я нажал на кнопку, моя функция не вызывает

, пожалуйста, помогите мне.

Answer 1

Хорошо, я вас понял, проблема в вашей сетке.если вы играете с Jquery, то вы должны придерживаться этого.не очень хорошая идея использовать jquery и angular вместе.

angular очень зрелый сам по себе.В любом случае, если вы хотите вызвать функцию из сетки, вы должны иметь дело с функцией jquery по щелчку

 $("#yourselector").click(function(){
    makeCellEdit();
});

, надеюсь, это поможет.

Answer 2

У этого стекаблица есть рабочий код:

https://stackblitz.com/edit/angular-m9tudm?file=app%2Fhello.component.ts

import { Component, OnInit, Input } from '@angular/core';  
import { HttpClient, HttpResponse } from '@angular/common/http';

class DataTablesResponse {   data: any[];   draw: number;   recordsFiltered: number;   recordsTotal: number;   coloumnName: {}; }

@Component({   selector: 'app-dynamic-datatable',   templateUrl: './hello.component.html'}) 
export class HelloComponent implements OnInit {

 mycoloums =[
    { data: "check", displayName: "check", hyperlink: false, edit: true},
    { data: 'processID',displayName: "Process Id", hyperlink: false, edit: true }, 
    { data: 'processName', displayName: "Process Name", hyperlink: true, edit: true },
    { data: 'processDescription',displayName: "Process Description", hyperlink: true, edit: true}   ];

 gefields = [
    {
        "processID": 1,
        "versionPublishedOnDateTime": null,
        "processLastModifiedOnDateTime": null,
        "processVersion": "",
        "processDescription": "My Process",
        "processLastModifiedByUserID": null,
        "functionID": 1,
        "processName": "My Process"
    },
    {
        "processID": 2,
        "versionPublishedOnDateTime": null,
        "processLastModifiedOnDateTime": null,
        "processVersion": "",
        "processDescription": "My Process 2",
        "processLastModifiedByUserID": null,
        "functionID": 2,
        "processName": "My Process 2"
    },
    {
        "processID": 3,
        "versionPublishedOnDateTime": null,
        "processLastModifiedOnDateTime": null,
        "processVersion": "",
        "processDescription": "map process",
        "processLastModifiedByUserID": null,
        "functionID": 3,
        "processName": "map process"
    },
    {
        "processID": 4,
        "versionPublishedOnDateTime": null,
        "processLastModifiedOnDateTime": null,
        "processVersion": "",
        "processDescription": "dd Process",
        "processLastModifiedByUserID": null,
        "functionID": 3,
        "processName": "dd Process"
    } ];   
   
    showPopUp = false;

  constructor() {
       }   ngOnInit(): void {
    console.log("_____________ngOnInit End____________");
    const that = this;

    }

  makeCellEdit(e) {
    console.log("______makeCellEdit()_____");   } }

Код компонента:

 <table datatable class="awidth row-border hover 
     display table table-bordered striped">
     <thead>
        <tr>
          <th *ngFor="let key of mycoloums" class="icon-margin" style="padding: 8px;">{{key.displayName}}</th>
        </tr>
    </thead>
    <tbody>
  <tr *ngFor="let gefield of gefields" class=" tab-font-size font-weight ">

    <td  *ngFor="let k of mycoloums"  class="tab-font-size font-weight" >
        
        <button *ngIf='k.edit == true' class='glyphicon glyphicon-pencil pull-right white' (click)="makeCellEdit($event)">{{k.displayName}}</button>
    </td>
  </tr>
  <tr *ngIf="gefields?.length == 0">
    <td colspan="3" class="no-data-available">No data!</td>
  </tr>
</tbody>