[英]How to create,edit and delete data in Ng2 smart table
我在我的 angular 2 項目中使用了 [ng2 smart table],我需要使用 http.post() 方法發送一個 API 請求,但是當我在控制台中點擊確認數據時出現了問題:
錯誤類型錯誤:_co.addClient 不是 function。
這是service.ts中的代碼:
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.");
}
}
)
}
這是我的模板:
<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>
組件.ts
settMain = {
noDataMessage: 'عفوا لا توجد بيانات',
actions: {
columnTitle: 'إجراءات',
position: 'right',
},
pager: {
perPage: 5,
},
add: {
addButtonContent: ' إضافة جديد ',
createButtonContent: '',
cancelButtonContent: '',
confirmCreate: true,
},
edit: {
editButtonContent: '',
saveButtonContent: '',
cancelButtonContent: '',
confirmSave: true,
},
delete: {
deleteButtonContent: '',
confirmDelete: true,
},
columns: {
id: {
title: 'كود العميل',
width: '80px',
},
name: {
title: 'اسم العميل',
width: '160px'
},
phone: {
title: ' الهاتف'
},
address: {
title: ' العنوان'
},
account: {
title: 'الرصيد '
},
notes: {
title: 'ملاحظات'
}
}
};
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,
};
那么我怎樣才能找到我的錯誤也是處理創建、編輯和刪除操作的最佳方法呢? 提前致謝
這是因為addClient
是service.ts
上的一個方法,而ng2-smart-table
是在該組件上實例化的,您不應該直接在模板上調用您的 service 方法。
因此,正確的做法是在您的 component.ts 上創建一個調用addClient
方法的方法。
在您的 component.html 模板上,我們將editConfirm
事件綁定到另一個方法onAddClient
<div class="mainTbl">
<ng2-smart-table
[settings]="settMain"
[source]="this.Service.clients"
(createConfirm)="onAddClient($event)"
(editConfirm)="onEditConfirm($event)"
(deleteConfirm)="onDeleteConfirm($event)"
></ng2-smart-table>
</div>
在您的 component.ts 上,
onAddClient(event) {
this.Service.addClient(event).subscribe(
(res) => {
// handle success
}, (error) => {
// handle error
});
}
此外,在您的 service.ts 上,您將傳遞來自組件的數據,並從 HTTP 客戶端返回來自 http 請求的響應。
addClient(data){
console.log(data);
return this.http.post<Clients>(this.url, data);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.