Angular DataTables.net自定義按鈕

我需要幫助如何使用DataTables.net打開Modal Windows按鈕在組件文件中創建按鈕。Angular 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>

它的工作原理。但這是不行的

我搜索並嘗試了很多方法，但沒有任何工作。

任何解決方法將有所幫助謝謝。

來源

2017-11-25 DejwitK

Component上下文（this）在使用function() { ... }時丟失了。

使用Arrow Function而不是保持組件的上下文（this）的保持

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

來源

2017-11-25 11:13:32

謝謝它的工作的，因爲我想現在我試着撥打specyfic模式，但我覺得我近 – DejwitK

@DejwitK高興知道，謝謝:) –

Angular DataTables.net自定義按鈕

回答

相關問題