Bonsoir

J'utilise datatables dans mon application Angular. J'ai inséré un bouton dans chaque ligne, me permettant d'afficher les données de chaque ligne dans un modal.
Et ça marche, sauf quand je clique sur un bouton, j'ai le message d'erreur suivant:

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'javascript:' is not a valid selector.
at Object.getSelectorFromElement (http://localhost:4200/scripts.js:59427:35)
at Function._getParentFromElement (http://localhost:4200/scripts.js:61183:27)
at HTMLDocument._clearMenus (http://localhost:4200/scripts.js:61137:31)
at HTMLDocument.dispatch (http://localhost:4200/scripts.js:5183:27)
at HTMLDocument.elemData.handle (http://localhost:4200/scripts.js:4991:28)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2768:31)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (http://localhost:4200/polyfills.js:2540:47)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:2843:34)
at invokeTask (http://localhost:4200/polyfills.js:4089:14)
at HTMLDocument.globalZoneAwareCallback (http://localhost:4200/polyfills.js:4115:17)
Je ne sais vraiment pas ce qui cloche.

Voici mon fichier.ts:

Code ts : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
import {DataTableDirective} from 'angular-datatables';
import {HttpClient} from '@angular/common/http';
import 'rxjs/Rx';
import { Observable } from 'rxjs/Rx';
import { CommonModule } from '@angular/common';
import { NgxSpinnerService } from 'ngx-spinner';
 
 
declare var $: any 
@Component({
  selector: 'app-tbl-searching',
  templateUrl: './tbl-searching.component.html',
  styleUrls: ['./tbl-searching.component.scss']
})
export class TblSearchingComponent implements OnInit, AfterViewInit {
  dtColumnSearchingOptions: any = {};
  @ViewChild(DataTableDirective)
  datatableElement: DataTableDirective;
   title = 'app';
 
  public isNoResult: boolean = true;  
  public empData: Object;
  public temp: Object=false;
 
  constructor( private http: HttpClient, private spinner: NgxSpinnerService) { }
 
 
 
  ngOnInit(): void  {
	  this.spinner.show();
	 // this.reloadData();
	 this.http.get('http://localhost:8080/gestion-scolaire/rest/compte/api/comptes').subscribe((resp: Response) => {
 
	this.empData = resp;
	this.temp = true;
	this.spinner.hide();
  }); 
    this.dtColumnSearchingOptions = {
 
    //  ajax: 'fake-data/datatable-data.json',
	"language": {
		"url": "fake-data/French.json",
		 buttons: {
                copyTitle: 'Ajouté au presse-papiers',
                copyKeys: 'Appuyez sur <i>ctrl</i> ou <i>\u2318</i> + <i>C</i> pour copier les données du tableau à votre presse-papiers. <br><br>Pour annuler, cliquez sur ce message ou appuyez sur Echap.',
                copySuccess: {
                    _: '%d lignes copiées',
                    1: '1 ligne copiée'
                }
            }
		},
      columns: [
	  {
        title: '<input type="checkbox" id="checkall" />',
        render: function (data: any, type: any, full: any) {
          return '<input type="checkbox" class="checkthis" />';
        }
      },
	  {
        title: 'firstName',
        data: 'firstName'
      }, {
        title: 'lastName',
        data: 'lastName'
      }, {
        title: 'Job',
        data: 'job'
      }, {
        title: 'Email',
        data: 'email'
      }, {
        title: 'Action',
         data: 'action'
      } ],
      responsive: true,
      dom: 'Blfrtip',
      buttons: [
        {
			text: 'Copier',			
			extend: 'copy',
			exportOptions: {
				columns: [ 1, 2, 3, 4, 5 ]
			}
        },
        {
			text: 'Imprimer',			
			extend: 'print',
			exportOptions: {
				columns: [ 1, 2, 3, 4, 5 ]
			}
        },
        'excel'
      ]
    };
 
	 $(document).on( 'click', '.getDetails', function () {
      $(".username").text("");
      $(".username").text($(this).parents("tr").find(".fname").text());
       $("#myModal").modal('show');
  } );
 
  }


Et voici mon fichier html:

Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
 
      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">User Name</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
 
      <!-- Modal body -->
      <div class="modal-body">
        Hi : <span class="username"></span>
      </div>
 
      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
 
    </div>
  </div>
</div>
 
 
<table datatable [dtOptions]="dtColumnSearchingOptions" class="table table-striped row-border table-hover" *ngIf="this.temp">
 
 <tr *ngFor="let compte of this.empData " >
                <td></td>
                <td class="fname">{{compte.firstName}}</td>
                <td>{{compte.lastName}}</td>
                <td>{{compte.job}}</td>
                <td>{{compte.email}}</td>
                <td>
					<button class=" getDetails btn btn-info btn-voir  btn-xs"  data-toggle="modal" ><i class="fas fa-eye"></i></button>
					<button class="btn btn-danger btn-supprimer  btn-xs"  ><i class="fa fa-trash" aria-hidden="true"></i></button>
				</td>				
 </tr> 
 <tfoot>
  <tr>
  <th></th>
    <th><input type="text" placeholder="Search firstName" name="search-firstName" class="form-control" /></th>
    <th><input type="text" placeholder="Search lastName" name="search-lastName" class="form-control" /></th>
    <th><input type="text" placeholder="Search job" name="search-job" class="form-control" /></th>
    <th><input type="text" placeholder="Search address" name="search-address" class="form-control" /></th>
    <th><input type="text" placeholder="Search email" name="search-email" class="form-control" /></th>
 
  </tr>
  </tfoot>
</table>

Merci