J'obtiens cette erreur : ERROR TypeError: Cannot read property 'subscribeNewsletter' of undefined at NewsletterComponent.subscribeNewsletter (newsletter.component.ts:47) lorsque j'essaie de créer un service pour m'abonner à une newsletter à partir d'un formulaire.

Voici mon NewsletterComponent :

import { Component, OnInit, Inject, forwardRef } from '@angular/core';
import { NewsletterService } from '../common/service/newsletter.service';
import { NewsletterDto } from '../common/model/dto/newsletter-dto';
import { FormGroup } from "@angular/forms";
import { FormControl } from '@angular/forms';

@Component({
    selector: 'app-user-cmp',
    templateUrl: 'newsletter.component.html'
})

export class NewsletterComponent implements OnInit {

    newsletterService: NewsletterService;
    newsletterForm: FormGroup;
    newsletter: NewsletterDto;

    ngOnInit() {
        this.newsletterForm = new FormGroup({
      'subscribe': new FormControl(null),
    });

        }


    constructor() {}

        subscribeNewsletter(): void {
            this.newsletter = {
            subscribe: this.newsletterForm.controls['subscribe'].value
            };
            this.newsletterService.subscribeNewsletter(this.newsletter).subscribe(newsletter => this.newsletter = newsletter);
        }
  }

Et voici mon NewsletterService :

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { NewsletterDto } from '../model/dto/newsletter-dto';
import { Observable, of } from 'rxjs';
import { map, catchError } from "rxjs/operators";


@Injectable({
    providedIn: 'root'
})
export class NewsletterService {

  private newsletterUrl = 'rest/newsletter/subscription';

  constructor(private http: Http) { }

  subscribeNewsletter(newsletter: NewsletterDto): Observable<any> {
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    return this.http
      .post(this.newsletterUrl, newsletter, options).pipe(
        map((res: any) => res.json()),
        catchError(<T>(error: any, result?: T) => {
          console.log(error);
          return of(result as T);
        })
      );
  }

}

Je ne comprends pas vraiment où est le problème ? Quelqu'un peut-il m'éclairer un peu ? Merci !

0
Be Ji 7 mars 2019 à 23:56

2 réponses

Meilleure réponse

Vous devez injecter le service dans constructor

constructor(public newsletterService: NewsletterService) {
   /* do the construction stuff */
}

Assurez-vous de supprimer l'autre propriété newsletterService définie avant costructor.

1
Harun Yilmaz 7 mars 2019 à 21:05

Dans votre composant vous déclarez

newsletterService: NewsletterService; 

Cela signifie que le type de service newsletter est NewsletterService. Mais vous ne créez aucune instance de la classe NewsletterService.

Dans votre service, la méthode subscriptionNewsletter peut être accessible via un objet. Vous devez donc d'abord créer une nouvelle instance de votre service.

Vous pouvez le faire sur votre composant comme

constructor(private newsletterService: NewsletterService) { }

Et supprimez toute autre déclaration que vous avez déjà donnée.

Cet injecteur de dépendance crée automatiquement une instance s'il n'est pas présent.

Vous pouvez le faire autrement, mais ce n'est pas une bonne façon.

newsletterService: NewsletterService=new NewsletterService();
2
Md. Abul Hasan 7 mars 2019 à 21:15