我有一个数据表,更新删除添加新事件,我已成功实现了get函数,但我无法执行post,put,delete。 任何帮助将不胜感激。
我的datatables.ts文件:
import { Component, OnInit } from '@angular/core';
import {FadeInTop} from "../../shared/animations/fade-in-top.decorator";
import { Http } from "@angular/http";
import { DemoService } from "app/+tables/+datatables-showcase/datatables.service";
import { Task } from "app/+tables/+datatables-showcase/tasks";
@FadeInTop()
@Component({
selector: 'sa-datatables-showcase',
templateUrl: './datatables-showcase.component.html',
})
export class DatatablesShowcaseComponent implements OnInit {
allTasks:Task[]=[];
constructor(private _demoService:DemoService) {}
ngOnInit() {
this._demoService.getAllTasks().subscribe(
(data:Task[]) =>{
this.allTasks= data;
}
);
}
deleteTask(item:Task){
this._demoService.deleteTask(item.ActivityID)
.subscribe(
(data:any) =>{
this.allTasks.splice(this.allTasks.indexOf(item),1);
},
function(error){
console.log('complete');
}
);
}
}
datatables.service.ts
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from "@angular/http";
import { Observable } from 'rxjs/Rx';
import { Task } from "app/+tables/+datatables-showcase/tasks";
@Injectable()
export class DemoService {
public url: string = "http://localhost:3000/Tasks/";
constructor(private _http: Http) {
}
// Uses http.get() to load a single JSON file
getAllTasks() {
return this._http.get(this.url)
.map((response: Response) => response.json());
}
deleteTask(item: Task) {
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this._http.delete(this.url + item.ActivityID, options)
.map((response: Response) => response.json());
}
addTask(item: Task) {
let body = JSON.stringify(item);
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this._http.post(this.url, body, options)
.map((response: Response) => response.json());
}
editTask(item: Task) {
let body = JSON.stringify(item);
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this._http.put(this.url + item.ActivityID, body, options)
.map((response: Response) => response.json());
}
}
task.ts
export class Task {
constructor(
public ActivityID: any,
public Title: String,
public ActivityCode: String,
public Status: string,
public ActivityDesc: String,
public DeptID: String,
public Idate: String
) {
}
}
数据表-showcase.component.component.html
<div id="content">
<div class="row">
<sa-big-breadcrumbs [items]="['Table', 'Data Tables']" icon="table" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
<sa-stats></sa-stats>
</div>
<sa-widgets-grid>
<div class="row">
<article class="col-sm-12">
<sa-widget [editbutton]="false" color="darken">
<header><span class="widget-icon"> <i class="fa fa-table"></i> </span>
<h2>Standard Data Tables</h2>
</header>
<div>
<div class="widget-body no-padding">
<sa-datatable [options]="{
colReorder: true,
columns: [ {data: 'ActivityCode'}, {data: 'ActivityDesc'},{data: 'DeptID'},{data: 'Idate'} ] }"
paginationLength="true" tableClass="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th data-hide="phone">Activity Code</th>
<th data-class="expand"><i class="fa fa-fw fa-user text-muted hidden-md hidden-sm hidden-xs"></i> Activity Description
</th>
<th data-hide="phone"><i class="fa fa-fw fa-phone text-muted hidden-md hidden-sm hidden-xs"></i> Department
</th>
<th data-hide="phone,tablet"><i class="fa fa-fw fa-map-marker txt-color-blue hidden-md hidden-sm hidden-xs"></i> Idate
</th>
<th data-hide="phone,tablet"><i class="fa fa-fw fa-calendar txt-color-blue hidden-md hidden-sm hidden-xs"></i> delete
</th>
<th data-hide="phone,tablet">View</th>
</tr>
</thead>
<thead>
<tr *ngFor="let item of allTasks">
<td>{{item.ActivityCode}}</td>
<td>{{item.ActivityDesc}}</td>
<td>{{item.DeptID}}</td>
<td>{{item.Idate}}</td>
<td><button (click) ='deleteTask(item)' type="button" class="btn-btn-default" aria-label="Left Align">
<span class = "glyphicon glyphicon-trash" aria-hidden = "true"></span>
</button>
</td>
<td><button (click) ='deleteTask(item)' type="button" class="btn-btn-default" aria-label="Left Align">
<span class = "fa fa-edit" aria-hidden = "true"></span>
</button>
</td>
</tr>
</thead>
</sa-datatable>
</div>
</div>
</sa-widget>
</article>
</div>
</sa-widgets-grid>
</div>
模型中的我的服务器端页面Task.js
var db = require('../dbconnection');
var Task = {
getAllTasks: function (callback) {
return db.query("Select * from Track_tblActivityMaster", callback);
},
getTaskById: function (ActivityID, callback) {
return db.query("select * from Track_tblActivityMaster where ActivityID=?", [ActivityID], callback);
},
addTask: function (Task, callback) {
console.log("inside service");
console.log(Task.ActivityID);
return db.query("Insert into Track_tblActivityMaster values(?,?,?,?,?,?,?,?,?,?)", [Task.ActivityID, Task.DeptID, Task.ActivityCode, Task.ActivityDesc, Task.WriteUP, Task.AFgrpID, Task.Idate, Task.Icreater, Task.IsActive, Task.IsDelete], callback);
//return db.query("insert into task(Id,Title,Status) values(?,?,?)",[Task1.Id,Task1.Title,Task1.Status],callback);
},
deleteTask: function (ActivityID, callback) {
return db.query("delete from Track_tblActivityMaster where ActivityID=?", [ActivityID], callback);
},
updateTask: function (ActivityID, Task, callback) {
return db.query("update Track_tblActivityMaster set DeptID=?,ActivityCode=? ActivityDesc=? WriteUP=? AFgrpID=? Idate=? Icreater=? IsActive=? IsDelete=? where ActivityID=?", [Task.DeptID, Task.ActivityCode, Task.ActivityDesc, Task.WriteUP, Task.AFgrpID, Task.Idate, Task.Icreater, Task.IsActive, Task.IsDelete, ActivityID,], callback);
},
deleteAll: function (item, callback) {
var delarr = [];
for (i = 0; i < item.length; i++) {
delarr[i] = item[i].Id;
}
return db.query("delete from Track_tblActivityMaster where ActivityID in (?)", [delarr], callback);
}
};
module.exports = Task;
路线中的Tasks.js
var express = require('express');
var router = express.Router();
var Task = require('../models/Task');
router.get('/:ActivityID?', function (req, res, next) {
if (req.params.ActivityID) {
Task.getTaskById(req.params.ActivityID, function (err, rows) {
if (err) {
res.json(err);
}
else {
res.json(rows);
}
});
}
else {
Task.getAllTasks(function (err, rows) {
if (err) {
res.json(err);
}
else {
res.json(rows);
}
});
}
});
router.post('/', function (req, res, next) {
Task.addTask(req.body, function (err, count) {
//console.log(req.body);
if (err) {
res.json(err);
}
else {
res.json(req.body);//or return count for 1 & 0
}
});
});
router.post('/:ActivityID', function (req, res, next) {
Task.deleteAll(req.body, function (err, count) {
if (err) {
res.json(err);
}
else {
res.json(count);
}
});
});
router.delete('/:ActivityID', function (req, res, next) {
Task.deleteTask(req.params.ActivityID, function (err, count) {
if (err) {
res.json(err);
}
else {
res.json(count);
}
});
});
router.put('/:ActivityID', function (req, res, next) {
Task.updateTask(req.params.ActivityID, req.body, function (err, rows) {
if (err) {
res.json(err);
}
else {
res.json(rows);
}
});
});
module.exports = router;
请让我知道我哪里出错了。 谢谢。