时间戳

首页 > 解决方案 > 角度（点击）没有在循环中调用函数

angular - 角度（点击）没有在循环中调用函数

问题描述

我正在尝试创建一个具有单元格编辑功能的表格。我有一个单元格数据数组。我正在迭代数组并使用引导铅笔图标创建一个按钮。请检查以下模板

  <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()_____");   } }

我将此表用作子组件。但是当我点击按钮时，我的函数没有调用

请帮我。

标签： angularangular5

解决方案

好的，我得到了您的关注，实际问题是您的网格。如果你在玩 Jquery，那么你必须坚持下去。同时使用 jquery 和 angular 并不是一个好主意。

angular是非常成熟的它自己。如果你想从网格中调用一个函数，任何方式都必须在点击时处理 jquery 函数

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

希望这会有所帮助。

推荐阅读