Блог

Я новичок в angular, и я хочу добавить к кнопке добавления действие, которое вызывает веб-службу, которая отправляет себя на сервер узла для добавления пользователя. я работаю над шаблоном (nebular-ngx) . введите описание ссылки здесь

это код моей кнопки добавления с 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();
 }
 }
 }
  

Вы можете использовать событие нажатия кнопки для выполнения вызова службы из компонента:

 <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 используйте HttpClient от angular для выполнения вызова службы:

 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);
  }
}