Блог

Я использую бесплатный шаблон администратора angular Next Angular 8, мне нужно показывать модальное окно при нажатии кнопки в строке таблицы данных.

Ниже вы можете увидеть код

Html-код

 <div class="col-sm-12">
    <app-card cardTitle="Action" cardClass="card-datatable" [options]="false">
      <div class="table-responsive">
        <table datatable [dtOptions]="dtRouterLinkOptions" class="table table-striped table-bordered table-hover"></table>
      </div>
    </app-card>
  </div>
  

Машинописный код

 export class TblDatatableComponent implements OnInit {
  dtRouterLinkOptions: any = {};

  constructor() { }

  ngOnInit() {
    this.dtRouterLinkOptions = {
      ajax: 'fake-data/datatable-data.json',
      columns: [{
        title: 'Name',
        data: 'name'
      }, {
        title: 'Position',
        data: 'position'
      }, {
        title: 'Office',
        data: 'office'
      }, {
        title: 'Age',
        data: 'age'
      }, {
        title: 'Start Date',
        data: 'date'
      }, {
        title: 'Salary',
        data: 'salary'
      }, {
        title: 'Action',
        render: function (data: any, type: any, full: any) {
          return '<button class="btn btn-outline-primary btn-sm">View</button>';
        }
      }],
      responsive: true
    };
  }
}
  

Как всплывающее окно модального окна при нажатии кнопки просмотра

Короче говоря, вам нужно добавить имя класса к вашей модальной кнопке вызова, а затем добавить событие onclick в функцию InitComplete в вашей функции ngOnInit следующим образом:

 "initComplete": function() {
    $("#yourdatatable-id").on( "click", ".your_modal_calling_class", function () {
        // enable the modal here
    });
}
  

Пожалуйста, также проверьте ссылку на InitComplete, она подробно описана там.

https://datatables.net/reference/option/initComplete