While working on my Angular 2 project, I utilized [ng2 smart table]. My goal was to send an API request using the http.post() method. However, upon clicking the button to confirm the data, I encountered the following error in the console:
ERROR TypeError: _co.addClient is not a function.
The code snippet in service.ts looks like this:
import { Injectable } from '@angular/core';
import { Clients } from './clients.model';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable} from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ClientsService {
url="http://localhost:21063/api/clints"
clients:Clients[];
client:Clients;
constructor(private http:HttpClient) { }
getAllClients(): Observable<Clients[]>{
return this.http.get<Clients[]>(this.url);
}
addClient(event){
this.http.post<Clients>(this.url,this.client)
.subscribe(
res=>{
console.log(res);
event.confirm.resolve(event.Clients);
},
(err: HttpErrorResponse) => {
if (err.error instanceof Error) {
console.log("Client-side error occurred.");
} else {
console.log("Server-side error occurred.");
}
}
)
}
Here's my template:
<div class="mainTbl">
<ng2-smart-table
[settings]="settMain"
[source]="this.Service.clients"
(createConfirm)="addClient($event)"
(editConfirm)="onEditConfirm($event)"
(deleteConfirm)="onDeleteConfirm($event)"
></ng2-smart-table>
</div>
In addition, here's the content of my component .ts:
settMain = {
noDataMessage: 'Sorry, no data available',
actions: {
columnTitle: 'Actions',
position: 'right',
},
pager: {
perPage: 5,
},
add: {
addButtonContent: 'Add New ',
createButtonContent: '',
cancelButtonContent: '',
confirmCreate: true,
},
edit: {
editButtonContent: '',
saveButtonContent: '',
cancelButtonContent: '',
confirmSave: true,
},
delete: {
deleteButtonContent: '',
confirmDelete: true,
},
columns: {
id: {
title: 'Client ID',
width: '80px',
},
name: {
title: 'Client Name',
width: '160px'
},
phone: {
title: 'Phone Number'
},
address: {
title: 'Address'
},
account: {
title: 'Balance'
},
notes: {
title: 'Notes'
}
}
};
private myForm: FormGroup;
constructor(private formBuilder: FormBuilder, private Service: ClientsService) { }
ngOnInit() {
this.Service.getAllClients().subscribe(data => this.Service.clients = data);
this.Service.client={
id:0,
name:null,
phone:null,
address:null,
type:null,
account:0,
nots:null,
branchId:0,
};
If anyone can help me identify my mistakes and suggest the best approach for handling create, edit, and delete operations, I would greatly appreciate it. Thank you in advance!