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">×</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>
它的工作原理。但这是不行的
我搜索并尝试了很多方法,但没有任何工作。
任何解决方法将有所帮助谢谢。
答
Component
上下文(this
)在使用function() { ... }
时丢失了。
使用Arrow Function
而不是保持组件的上下文(this
)的保持
action:() => {
this.openModal()
}
谢谢它的工作的,因为我想 现在我试着拨打specyfic模式,但我觉得我近 – DejwitK
@DejwitK高兴知道,谢谢:) –