ОШИБКА TypeError: Невозможно прочитать свойство 'post' из неопределенного в Object.ApiClientService.sendRequest

Question

Ниже мой код saveComponent. Все мои запросы не работают нормально. Когда я выполняю запрос на публикацию, я получаю сообщение «Не могу прочитать свойство« пост »с неопределенным значением»

SaveComponent.ts

import {Component, OnInit} from '@angular/core';
import {Liv} from '../../services/models/liv.model';
import {Livre} from '../../services/models/livre.model';

import {ActivatedRoute, Router} from "@angular/router";


declare var require: any;

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


  prod = new Liv() ;
  test = require('../../services/index');


  constructor(public router: Router, public activatedRoute: ActivatedRoute) {
  }

  ngOnInit() {
  }



  saveProduit() {
    console.log(this.test.ApiClientService.prototype.sendRequest)
    this.prod.id = null;


      this.test.ApiClientService.prototype.save(this.prod)
      .subscribe(data => {
        console.log("this is" + data);
        alert("ID:" + this.prod.nom);
        this.router.navigate(['show-all']);
      }, err => {
        console.log(err);
      });


}}

.. / .. / обслуживание / index.ts

import { Inject, Injectable, Optional } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';

import {
  Livre
} from './models';

/**
* Created with angular4-swagger-client-generator.
*/
@Injectable()
export class ApiClientService {

  private domain = 'http://localhost:8084';

  constructor(private http: HttpClient, @Optional() @Inject('domain') domain: string ) {
    if (domain) {
      this.domain = domain;
    }
  }


  public save(body: Livre): Observable<HttpResponse<any>> {
    let uri = `/Livre/add`;
    let headers = new HttpHeaders();
    let params = new HttpParams();
    return this.sendRequest<any>('post', uri, headers, params, JSON.stringify(body));
  }

  private sendRequest<T>(method: string, uri: string, headers: HttpHeaders, params: HttpParams, body: any): Observable<HttpResponse<T>> {
     if (method === 'post') {
      return this.http.post<T>(this.domain + uri, body, { headers: headers.set('Content-Type', 'application/json'), params: params, observe: 'response' });
    } else {
      console.error('Unsupported request: ' + method);
      return Observable.throw('Unsupported request: ' + method);
    }
  }
}

saveComponent.html

<div class="container spacer">
  <div class="panel panel-primary">
    <div class="panel-heading">Nouveau Livre:</div>
    <div class="panel-body">

      <div class="form-group">
        <label class="control-label">Nom:</label>
        <input class="form-control" type="text" [(ngModel)]="prod.nom"/>
      </div>
      <div class="form-group">
        <label class="control-label">auteur:</label>
        <input class="form-control" type="text" [(ngModel)]="prod.auteur"/>
      </div>
      <div class="form-group">
        <label class="control-label">prix:</label>
        <input class="form-control" type="text" [(ngModel)]="prod.prix"/>
      </div>

      <button class="btn btn-primary" (click)="saveProduit()">Save</button>
    </div>
  </div>
</div>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import {ApiClientService} from '../services/index'
import { AppComponent } from './app.component';
import { SaveComponent } from './save/save.component';
import {RouterModule, Routes} from "@angular/router";
import {HttpModule} from "@angular/http";
import {FormsModule} from "@angular/forms";
import { DeleteComponent } from './delete/delete.component';
import { UpdateComponent } from './update/update.component';
import { SearchComponent } from './search/search.component';
import { ShowAllComponent } from './show-all/show-all.component';

const appRoutes:Routes=[
{path:'new-produit',component:SaveComponent},
{path:'delete-produit',component:DeleteComponent},
{path:'update-produit',component:UpdateComponent},
{path:'search-produit',component:SearchComponent},
{path:'show-all',component:ShowAllComponent},
{path:'',redirectTo:'/show-all', pathMatch:'full'}

]
@NgModule({
  declarations: [
    AppComponent,
    SaveComponent,
    DeleteComponent,
    UpdateComponent,
    SearchComponent,
    ShowAllComponent
  ],
  imports: [
    BrowserModule , HttpClientModule, RouterModule.forRoot(appRoutes), HttpModule, FormsModule
  ],
  providers: [ApiClientService],
  bootstrap: [AppComponent]
})
export class AppModule { }

ошибка

SaveComponent.html:19 ERROR TypeError: Cannot read property 'post' of undefined
    at Object.ApiClientService.sendRequest (index.ts:90)
    at Object.ApiClientService.save (index.ts:32)
    at SaveComponent.saveProduit (save.component.ts:35)
    at Object.eval [as handleEvent] (SaveComponent.html:19)
    at handleEvent (core.js:13589)
    at callWithDebugContext (core.js:15098)
    at Object.debugHandleEvent [as handleEvent] (core.js:14685)
    at dispatchEvent (core.js:10004)
    at eval (core.js:10629)
    at HTMLButtonElement.eval (platform-browser.js:2628)

Я пытаюсь импортировать сервис с функцией require, но de http не вводится в файл de ts

Answer 1

Вот правильный способ использования внедрения зависимостей. Вы не должны использовать тот прототип, который вы использовали, поскольку он не будет создавать экземпляр класса должным образом.

Чтобы служба была доступна для внедрения зависимостей, вам необходимо добавить ее в список provides вашего модуля. Возможно, вы захотите прочитать о внедрении зависимости здесь

SaveComponent.ts

import {Component, OnInit} from '@angular/core';
import {Liv} from '../../services/models/liv.model';
import {Livre} from '../../services/models/livre.model';
import {ApiClientService} from '../../services/index';

import {ActivatedRoute, Router} from "@angular/router";

// ...

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

   // ...

  constructor(
    public router: Router, 
    public activatedRoute: ActivatedRoute, 
    private apiClientService: ApiClientService
  ) {}

  // ...    

  saveProduit() {
    this.prod.id = null;
    this.apiClientService.save(this.prod);
    // ...