無法使用AngularJS連接到數據庫

Question

我從此鏈接https://akveo.github.io/ng2-admin/articles/002-installation-guidelines/獲取幫助。

我想將jee項目集成到此模板中：我使用休息服務。

爲了一個新的實體添加到我的數據庫，我要補充this到文件action.component.js：

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 
 
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 
 
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 
 
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 
 
    return c > 3 && r && Object.defineProperty(target, key, r), r; 
 
}; 
 
var __metadata = (this && this.__metadata) || function (k, v) { 
 
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 
 
}; 
 
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'; 
 
import { Grid } from '../../../lib/grid'; 
 
import { ActivatedRoute, RouterModule, Routes, Router } from '@angular/router'; 
 
import { Location } from '@angular/common'; 
 
import { Http, Headers, RequestOptions } from '@angular/http'; 
 

 
var ActionsComponent = (function() { 
 
    function ActionsComponent() { 
 

 
     this.create = new EventEmitter(); 
 
    } 
 
    return ActionsComponent; 
 
}()); 
 
__decorate([ 
 
    Input(), 
 
    __metadata("design:type", Grid) 
 
], ActionsComponent.prototype, "grid", void 0); 
 
__decorate([ 
 
    Output(), 
 
    __metadata("design:type", Object) 
 
], ActionsComponent.prototype, "create", void 0); 
 
ActionsComponent = __decorate([ 
 
    Component({ 
 
     selector: 'ng2-st-actions', 
 
     template: "\n <a href=\"#\"  [innerHTML]=\"grid.getSetting('add.createButtonContent')\"\n  (click)=\"$event.preventDefault();create.emit($event)\"></a>\n <a href=\"#\" class=\"ng2-smart-action ng2-smart-action-add-cancel\"\n  [innerHTML]=\"grid.getSetting('add.cancelButtonContent')\"\n  (click)=\"$event.preventDefault();grid.createFormShown = false;\"></a>\n ", 
 
    }) 
 
], ActionsComponent); 
 
export { ActionsComponent }; 
 
//# sourceMappingURL=actions.component.js.map

明知使用方法添加一個實體的定義如上create.emit($event)。

你有什麼想法解決這個問題嗎？非常感謝。

Answer 1

無需對此文件進行更改。該文件smartTables.component.ts看起來像這樣：

import { Component, OnInit, Input } from '@angular/core'; 
 
import { SmartTablesService } from './smartTables.service'; 
 
import { LocalDataSource } from 'ng2-smart-table'; 
 

 

 
import { Http, Response, Headers, RequestOptions } from '@angular/http'; 
 
import 'rxjs/add/operator/toPromise'; 
 
import { Observable } from 'rxjs'; 
 
import { Router, ActivatedRoute } from '@angular/router'; 
 
import { Location } from '@angular/common'; 
 

 
@Component({ 
 
    selector: 'smart-tables', 
 
    templateUrl: './smartTables.html', 
 
    styleUrls: ['./smartTables.scss'] 
 
}) 
 

 
export class SmartTables 
 
{ 
 

 
@Input() person: any; 
 
@Input() rowData: any; 
 
    
 
    query: string = ''; 
 

 
    settings = { 
 
    add: { 
 
     addButtonContent: '<i class="ion-ios-plus-outline"></i>', 
 
     createButtonContent: '<i class="ion-checkmark"></i>', 
 
     cancelButtonContent: '<i class="ion-close"></i>', 
 
     confirmCreate: true 
 
    }, 
 
    delete: { 
 
     deleteButtonContent: '<a href="#" (click)="delete()">LOL</a>', 
 
     confirmDelete: true 
 
    }, 
 
    edit: { 
 
     editButtonContent: '<i class="ion-edit"></i>', 
 
     saveButtonContent: '<i class="ion-checkmark"></i>', 
 
     cancelButtonContent: '<i class="ion-close"></i>', 
 
    }, 
 

 
    columns: { 
 
     
 
     age: { 
 
     title: 'Age', 
 
     type: 'number' 
 
     }, 
 
     name: { 
 
     title: 'Name', 
 
     type: 'string' 
 
     } 
 
     
 
    } 
 
    }; 
 

 
    source: LocalDataSource = new LocalDataSource(); 
 

 

 

 
    constructor(protected service: SmartTablesService, private http: Http, private route: ActivatedRoute, private location: Location, private router: Router) 
 
    { 
 
     this.service.getData().then 
 
     (
 
      (data) => 
 
      { 
 
       this.source.load(data); 
 
      } 
 
    ); 
 

 
     
 
     this.person = 
 
     { 
 
      "ref": "", 
 
      "age": "", 
 
      "name": "" 
 
     } 
 
    } 
 

 

 
    onDeleteConfirm(event): void 
 
    { 
 
     if (window.confirm('Are you sure you want to delete?')) 
 
     { 
 
      event.confirm.resolve(); 
 
     } 
 
     else 
 
     { 
 
      event.confirm.reject(); 
 
     } 
 
    } 
 

 

 
    onCreateConfirm(event): any 
 
    { 
 
     if (window.confirm('Are you sure you want to add new duke?')) 
 
     { 
 
      let headers = new Headers({ 'Content-Type': 'application/json' }); 
 
       let options = new RequestOptions({ headers: headers }); 
 
       this.http.put("http://localhost:8080/dukes/resources/dukes/addd", JSON.stringify({ 
 
      "ref": "", 
 
      "age": event.newData['age'], 
 
      "name": event.newData['name'] 
 
     }), options) 
 
        .map(result => result.json()) 
 
        .subscribe(results => 
 
        { 
 
         window.location.href="http://localhost:4200/#/pages/tables/smarttables"; 
 
        }, error => { 
 
         console.error(error); 
 
        }); 
 
      
 
      event.confirm.resolve(event.newData); 
 
      
 
     } 
 
     else 
 
     { 
 
      event.confirm.reject(); 
 
     } 
 
    } 
 

 

 

 

 
    onSaveConfirm(event):void 
 
    { 
 

 
    } 
 

 

 
}

試試這個。 HTH。