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自定义按钮

回答

相关问题