javascript - 无法使用 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。