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

当您使用 function () { ... }.

时，

Component context(this) 已丢失

改用Arrow Function来保持组件

的上下文（this）

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

Angular DataTables.net 自定义按钮

Angular DataTables.net Custom Buttons

javascript

button

angular

ngx-bootstrap-modal