создать новые данные в умной таблице Ng2 - PullRequest
0 голосов
/ 18 октября 2019

Я использовал [умную таблицу ng2] в своем проекте angular 2, мне нужно отправить запрос API с помощью метода Http post, но проблема возникла, когда я нажал на кнопку, чтобы подтвердить данные, сталкивающиеся с этой ошибкой в ​​консоли:

core.js: 7187 ОШИБКА TypeError: Преобразование круговой структуры в JSON -> начиная с объекта с конструктором 'Subscriber' |свойство '_subscription' -> объект с конструктором 'Array' |index 0 -> объект с конструктором 'SubjectSubscription' --- свойство '_parent' закрывает окружность в JSON.stringify () в HttpRequest.serializeBody (http.js: 804) в Observable._subscribe (http.js: 1858) в Observable:(mergeMap.js: 53) в MergeMapSubscriber._next (mergeMap.js: 36)

Я создаю метод для отправки новых данных в API в 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(client){
return this.http.post(this.url,client)

}

мой componenttent.ts

import { Clients } from './../clients.model';
import { Component, OnInit } from '@angular/core';
import { IAngularMyDpOptions, IMyDateModel } from 'angular-mydatepicker';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ClientsService } from '../clients.service';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';



@Component({
  selector: 'app-client-info',
  templateUrl: './client-info.component.html',
  styleUrls: ['./client-info.component.css']
})
export class ClientInfoComponent implements OnInit {

  // start main stores tbl
  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: 'الرصيد '
      },
      nots: {
        title: 'ملاحظات'
      }
    }
  };
  // end main stores tbl
  //start date option
  myOptions: IAngularMyDpOptions = {
    dateRange: false,
    dateFormat: 'yyyy/mm/dd',
    firstDayOfWeek: 'sa',
    sunHighlight: false,

    // other options... 
  };

  private myForm: FormGroup;
  constructor(private formBuilder: FormBuilder, private Service: ClientsService) { }


  ngOnInit() {

    this.Service.getAllClients().subscribe(data => this.Service.clients = data);

  onAddClient(event){
    this.Service.addClient(event).subscribe(
      res=>{
        console.log(res);

        event.confirm.resolve(event.clients);
      },

    )
  } 

и мой шаблон

 <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>
    </div> <!-- end main stores tbl-->

, поэтому вопрос в том, где мой mestakeа какой лучший способ отправки данных в смарт-таблицу ng2?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...