如何在 Ng2 smart 中创建、编辑和删除数据 table

Question

我在我的 angular 2 项目中使用了 [ng2 smart table]，我需要使用 http.post() 方法发送一个 API 请求，但问题发生了当我单击按钮确认数据时，控制台中出现此错误：

ERROR TypeError: _co.addClient is not a 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,
    };

那么我怎样才能找到我的错误以及处理创建、编辑和删除操作的最佳方法是什么？提前致谢

Answer 1

这是因为 addClient 是 service.ts 上的一个方法，而 ng2-smart-table 是在该组件上实例化的，您不应该直接在模板上调用您的服务方法。

因此，正确的做法是在 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 上，您将传递来自组件的数据，以及 return 来自 HTTP 客户端的 http 请求的响应。

addClient(data){
  console.log(data);
  return this.http.post<Clients>(this.url, data);
}

如何在 Ng2 smart 中创建、编辑和删除数据 table

How to create,edit and delete data in Ng2 smart table

javascript

typescript

ng2-smart-table

angular