错误TypeError:无法读取newsletter.component.ts.NewsletterComponent.subscribeNewsletter处未定义的属性“”subscribeNewsletter“”

Question

当我试图创建一个从表单订阅时事通讯的服务时，我得到了这个错误：ERROR TypeError: Cannot read property 'subscribeNewsletter' of undefined at NewsletterComponent.subscribeNewsletter (newsletter.component.ts:47)。

这是我的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);
        }
  }

这是我的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);
        })
      );
  }

}

我真的不明白问题出在哪里？有没有人能给我一点启发？谢谢！

Answer 1

您应该在constructor中注入服务

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

确保删除在costructor之前定义的另一个newsletterService属性。

Answer 2

在您的组件中声明

newsletterService: NewsletterService; 

这意味着NewsletterService类型是newsletterService。但是您并没有创建NewsletterService类的任何实例。

在您的服务中，可以通过对象访问subscribeNewsletter方法，因此首先您需要创建服务的新实例。

您可以在组件上执行此操作，如下所示

constructor(private newsletterService: NewsletterService) { }

并删除您已经给出的其他声明。

如果实例不存在，此依赖项注入器会自动创建实例。

另一种方法你可以做到这一点，但这不是一个好方法。

newsletterService: NewsletterService=new NewsletterService();