невозможно вызвать всплывающее окно при нажатии на ссылку внутри динамически связанной ячейки ag-grid - PullRequest
Новая
       35

невозможно вызвать всплывающее окно при нажатии на ссылку внутри динамически связанной ячейки ag-grid

0 голосов
/ 11 января 2019

Я пытаюсь динамически привязать сетку AG из вызова API. что успешно сделано. Затем я пытаюсь сделать одно значение столбца как ссылку / якорь из файла TS в columndefs, что также сделано. Затем я пытаюсь сделать всплывающее окно при нажатии на эту ссылку через cellRenderer / cellRendererFramework, в котором я сталкиваюсь с проблемой

Здесь, если я передам callrendererFramework, то он не может быть отрендерен, затем я попытался добавить событие щелчка строки и попытался вызвать всплывающее окно с щелчком строки, все еще не способное вернуть всплывающее окно

Мой файл TS (dashboard.component.ts): 

import { Component, OnInit } from '@angular/core';
import { DataService } from '../../core/services/DataService';
import { ApiService } from './api.dashboard';
import { DeleteMasterQuestion } from './delete.component';
import { AddUtterances_ModalPopUp } from './ModalAddUtterances.component';
import { callLifecycleHooksChildrenFirst } from '@angular/core/src/view/provider';

@Component({
    selector: 'rebar-dashboard',
    templateUrl: './dashboard.html'
})

export class DashboardComponent {

    message = 'Dasboard Page';
    userData: Object = null;



    constructor(private service: DataService) {
    }
    columnDefs = [
        {headerName: 'Id', field: 'id', hide: false},
        {headerName: 'Source', field: 'source', hide: false},
        {headerName: 'Category', field: 'metadate', cellRenderer: function(params) { return params.node.data.metadata[0].value}, editable: true},
        {headerName: 'Master Question',  field: 'metadate', cellRenderer: function(params) { return '<a href="#" data-toggle="modal" data-target="#myModal">'+params.node.data.metadata[1].value+'</a>'}},
        {headerName: 'Response', field: 'answer', editable: true},
        {headerName: 'Delete', cellRendererFramework: DeleteMasterQuestion,
        colId: "params",
        width: 150}
      ];

      rowData = [];



    ngOnInit() {
        var url = "<value>";
        var subscriptionId = "<value>";
        var kbId = "<value>";
        var environment = "prod";



        this.service.getD().subscribe(
            data => {
        console.log(data["qnaDocuments"]);
        this.rowData = data["qnaDocuments"];
        //this.userData =data["qnaDocuments"];
            }
        );
    }

    openDialog():string{
      return '<a href="#" data-toggle="modal" data-target="#myModal">';
        } 
}




dashboard.html file :

    <ag-grid-angular
    style="width: 900px; height: 500px;margin:auto"
    class="ag-theme-balham"
    [enableSorting]="true"
    [enableFilter]="true"
    [pagination]="true"
    [rowData]="rowData"
    [columnDefs]="columnDefs" 
    (rowClicked)="openDialog()" 
  >
  </ag-grid-angular>

  <div class="modal" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
    </div>
    <div class="modal-body">
            <div  style="margin:10px 0px 0px 30px;">
                    <br />
                    <label id="lbl_Head"><i>Master Questions/Utterances</i></label>
                    <br />
                    <input id="txt_MasterQ" type="text" class="rndBorders" style="width: 400px">
                    <br /> 
                    <div *ngFor="let item of apiData">                       
                        <input type="text" value={{item.questions}} style="width: 370px">
                    </div>
                    <input type="text" style="width: 370px"> &nbsp; <button class="btn btn-outline-success" (click)="AddRow($event)">Add</button>
            </div>         
    </div>
    </div>
    </div>
    </div> 


enter code here
...