POST data in angular-CodePudding

I am trying to create CRUD in my web application using angular. In here I am trying to send the data to web API using a service file. This code shows the entered data in the grid. but the entered data do not send to the backend. Can anyone help me to complete my code. Any help is much appeciated.

this is my admin.ts file

import { Component, OnInit } from '@angular/core';
import { HomeService } from '../home/home.service';
import { Product } from "./model";

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.css']
})
export class AdminComponent  {
  public gridData: any[];
  public name: any[];

  constructor(public _homeServise: HomeService) {
    this._homeServise.getMethodAdmin1().subscribe((res: any) => {
      this.gridData = res;
      console.log(this.gridData);
    })
createNew() {
     return new Product();
  }

  public addChartType() {
    this._homeServise.addChartType()
      .subscribe(data => {
        console.log(this.name)

      })
  }

}

This is my admin.html file

<form novalidate #myForm="ngForm">
        <kendo-grid [kendoGridTemplateEditing]="createNew"
                    [kendoGridBinding]="gridData2"
                    [pageSize]="10" [pageable]="true"
                    [sortable]="true" [navigable]="true">
          <ng-template kendoGridToolbarTemplate>
            <button kendoGridAddCommand type="button">Add new</button>
          </ng-template>
          <kendo-grid-column field="name" title="name">
            <ng-template kendoGridEditTemplate let-dataItem="dataItem">
              <input [(ngModel)]="dataItem.name" kendoGridFocusable name="name"  required />
            </ng-template>
          </kendo-grid-column>

          <kendo-grid-command-column title="command" [width]="220">
            <ng-template kendoGridCellTemplate let-isNew="isNew">
              <button kendoGridEditCommand type="button" [primary]="true">
                Edit
              </button>
              <button kendoGridRemoveCommand type="button">Remove</button>
              <button kendoGridSaveCommand type="button" [disabled]="myForm.invalid" (click)="addChartType()">
                {{ isNew ? "Add" : "Update" }}
              </button>
              <button kendoGridCancelCommand type="button">
                {{ isNew ? "Discard changes" : "Cancel" }}
              </button>
            </ng-template>
          </kendo-grid-command-column>
        </kendo-grid>
      </form>

This is my home.service

  addChartType() {
    let params = new HttpParams()
      .set('name', "name")
    return this.http.post<any>(this.configUrlAdmin2, { params })
  }

model.ts

export class Product {  }

CodePudding user response：

Post request should has payload as second params then the third one is options args:

let payload = {name:'test'};
let url = 'example.com'
const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json'
  })
};
  return this.http.post(url, payload, httpOptions)

CodePudding user response：

We use HttpParams to send query param in Get request. But in Post, we should send data in the body. For that, you can use second parameter in the post method.

let reqBody = {
  "name":"Your name"
}

this.http.post<any>(url, reqBody)