Angular DataTables.net Пользовательские кнопки

Question

Мне нужно помочь, как открыть модальные Windows с помощью DataTables.net кнопки, созданные кнопки в файле компонентов.

У меня ошибка:

ERROR TypeError: this.openModal is not a function
at u.action (czas-pracy.component.ts:64)

каждый раз. У меня проблема с тем, как вызвать функцию "openmodal()".

import { Component, OnInit, TemplateRef } from '@angular/core';
import { FadeInTop } from "../shared/animations/fade-in-top.decorator";
import { Http, Response } from '@angular/http';

import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

import { Observable } from "rxjs/Rx";


@FadeInTop()
@Component({
  selector: 'sa-czas-pracy',
  templateUrl: './czas-pracy.component.html',
  styleUrls: ['./czas-pracy.component.css']
})
export class CzasPracyComponent implements OnInit {
  
  public REST_ROOT = 'http://localhost:3000/pracownicy/pracownicy';
  
  options = {
    dom: "Bfrtip",
    ajax: (data, callback, settings) => {
      this.http.get(this.REST_ROOT)
        .map(this.extractData)
        .catch(this.handleError)
        .subscribe((data) => {
          console.log('data from rest endpoint', data);
          callback({
            aaData: data.slice(0, 100)
          })
        })
    },
    columns: [
      { data: "Imie" },
      { data: "Nazwisko" },
      { data: "Brygada" },
      { data: "Stawka" },
      { data: "Aktywny" },
    ],
    buttons: [
      { text: 'Add',
        action: function ( ) {
          this.openModal()
        }
      }    
    ],
  };
  modalRef: BsModalRef;
  constructor(
      private http:Http, 
      private modalService: BsModalService,
  ) { }
  ngOnInit(){}

  openModal(template: TemplateRef<any>) {
    console.log(template);
    this.modalRef = this.modalService.show(template);
  }
  
  private extractData(res: Response) {
    let body = res.json();
    if (body) {
      return body.data || body
    } else {
      return {}
    }
  }

  private handleError(error: any) {
    // In a real world app, we might use a remote logging infrastructure
    // We'd also dig deeper into the error to get a better message
    let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
  }

}

Но я думаю, что следующая проблема будет в том, как вызвать текущий модальный из HTML-файла.

   <ng-template #template1>
     <div class="modal-header">
       <h4 class="modal-title pull-left">Modal</h4>
       <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
         <span aria-hidden="true">&times;</span>
       </button>
     </div>
     <div class="modal-body">
       This is a modal.
     </div>
   </ng-template>

Если я использую кнопку в HTML:

<button type="button" class="btn btn-primary
(click)="openModal(template1)">Create template modal</button>

оно работает. Но это никоим образом

Я искал и пробовал много способов, но ничего не получалось.

Любая работа вокруг была бы полезной Спасибо.

Answer 1

Component контекст (this) потерял, когда вы использовали function () { ... },

использование Arrow Function вместо этого держать контекст (this) компонента

action: () => {
  this.openModal()
}