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 togther并不是一个好主意。

角度很自然很成熟。如果你想从网格中调用一个函数你必须在点击

上处理jquery函数

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

希望这会有所帮助。

Answer 2

这个stackblitz有工作代码：

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

＆＃13;

$('#myform').get(0).reset();

＆＃13;

组件代码：

＆＃13;

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

＆＃13;

angular（click）不是在循环中调用函数

2 个答案: