Question

我是angular的初学者，我想添加一个按钮来添加一个操作，该操作调用将自身发送到节点服务器以添加用户的Web服务。我在模板（nebular-ngx）上工作。 enter link description here

这是我用angular4添加按钮的代码

 add: {
  addButtonContent: '<i class="nb-plus"></i>',
  createButtonContent: '<i class="nb-checkmark"></i>',
  cancelButtonContent: '<i class="nb-close"></i>',
},

我想添加一个动作来调用服务网络并将其发送到节点服务器

这是我的密码

import { Component } from '@angular/core';
import { LocalDataSource } from 'ng2-smart-table';

import { SmartTableData } from '../../../@core/data/smart-table';

@Component({
selector: 'ngx-smart-table',
templateUrl: './smart-table.component.html',
styles: [`
nb-card {
  transform: translate3d(0, 0, 0);
  }
 `],
 })
  export class SmartTableComponent {

settings = {
 add: {
   addButtonContent: '<i class="nb-plus"></i>',
    createButtonContent: '<i class="nb-checkmark"></i>',
   cancelButtonContent: '<i class="nb-close"></i>',
   },
  edit: {
  editButtonContent: '<i class="nb-edit"></i>',
  saveButtonContent: '<i class="nb-checkmark"></i>',
  cancelButtonContent: '<i class="nb-close"></i>',
  },
  delete: {
  deleteButtonContent: '<i class="nb-trash"></i>',
  confirmDelete: true,
  },
  columns: {
  id: {
    title: 'ID',
    type: 'number',
    },
    firstName: {
    title: ' Name',
    type: 'string',
    },
    email: {
     title: 'E-mail',
    type: 'string',
    },
    password: {
    title: 'password',
    type: 'password',
  },
   },
  };

source: LocalDataSource = new LocalDataSource();

constructor(private service: SmartTableData) {
const data = this.service.getData();
this.source.load(data);
}

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

Answer 1

您可以使用按钮单击事件从组件进行服务调用：

<button class="btn btn-primary" (click)="makeServiceCall($event)">Add</button>

在组件中：

makeServiceCall(e) {
       this.myAngularService.makeHttpRequest().subscribe((response: Response) => {
            // my response here
        }, (error: any) => {
            console.log(error);
        });

}

在myAngularService内，使用angular的HttpClient进行服务呼叫：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class myAngularService{
  constructor(private http: HttpClient) { }

  makeHttpRequest() {
      return this.http.get<any>('my_service_url);
  }
}

动作按钮调用服务网站

1 个答案: