Angular 6:类型为void的订阅不存在 [英] Angular 6: subscribe does not exist on type void

问题描述

我想在提交表单后向用户显示成功消息.

I want to display success messages to user after submitting a form.

表单在提交数据时非常完美，但是没有显示闪存消息，但我收到错误消息:在void类型上不存在订阅

form works perfectly when it come to submit the data but the flash message is not displayed and I get error: subscribe does not exist on type void

这就是我所做的，

HTML:

<form [formGroup]="angForm" novalidate>
        <div class="form-group">
          <label class="col-md-4">Comment author</label>
          <input type="text" class="form-control" name="author" formControlName="author" #author />
        </div>
        <div *ngIf="angForm.controls['author'].invalid && (angForm.controls['author'].dirty || angForm.controls['author'].touched)"
          class="alert alert-danger">
          <div *ngIf="angForm.controls['author'].errors.required">
            Name is required.
          </div>
        </div>
        <div class="form-group">
          <label class="col-md-4">comment description</label>
          <input type="text" class="form-control" formControlName="description" #description/>
        </div>
        <div *ngIf="angForm.controls['description'].invalid && (angForm.controls['description'].dirty || angForm.controls['description'].touched)"
          class="alert alert-danger">
          <div *ngIf="angForm.controls['description'].errors.required">
            description is required.
          </div>
        </div>
        <div class="form-group">
          <button (click)="addReview(author.value, description.value)" [disabled]="angForm.pristine || angForm.invalid" class="btn btn-primary">Add</button>
        </div>
      </form>

component.ts:

component.ts:

import { Component, OnInit } from '@angular/core';
import { MoviesService } from '../movies.service';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { ActivatedRoute } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { FlashMessagesModule, FlashMessagesService } from 'angular2-flash-messages';
@Component({
  selector: 'app-movie',
  templateUrl: './movie.component.html',
  styleUrls: ['./movie.component.scss']
})
export class MovieComponent implements OnInit {
  angForm: FormGroup;
  // tslint:disable-next-line:max-line-length
  constructor(
    private flashMessages: FlashMessagesService,
    private fb: FormBuilder,
    private route: Router,
    private http: HttpClient,
    private activeRouter: ActivatedRoute,
    private moviesService: MoviesService) {
    this.createForm();
  }
  createForm() {
    this.angForm = this.fb.group({
      author: ['', Validators.required],
      description: ['', Validators.required]
    });
  }
  addReview(author, description) {
    this.moviesService.addReview(author, description).subscribe(data => {
      if (data.sucess) {
        this.flashMessages.show('You are data we succesfully submitted', { cssClass: 'alert-success', timeout: 3000 });
        this.route.navigate(['/movie']);
      } else {
        this.flashMessages.show('Something went wrong', { cssClass: 'alert-danger', timeout: 3000 });
        this.route.navigate(['/movie']);
      }
    });
  }
  ngOnInit() {
  }
}

，这里服务.ts 一个

and here service .ts a

addReview(author, description) {
    const uri = 'http://localhost:8000/movies/comments/';
    const obj = {
      author: author,
      description: description
    };
    this
      .http
      .post(uri, obj)
      .subscribe(res =>
          console.log('Done'));
  }

这是应用html组件.

Here is app html component.

<div class="container">
  <flash-messages></flash-messages>
  <router-outlet></router-outlet>
</div>

问题 我的代码有什么问题?这是显示Flash消息的正确方法吗?被困在这里，任何帮助都会很棒

Question what is wrong with my code? is this the right way to dispaly flash message? am stuck out here , any help will be great

推荐答案

服务中的addReview()方法未返回任何内容.无需订阅服务内部的post()调用，只需返回post()方法即可.这将使该方法返回一个可观察的对象，您可以在调用该方法时对其进行订阅:

Your addReview() method inside your service is not returning anything. Instead of subscribing to the post() call inside your service, simply return the post() method. This will make the method return an observable which you can subscribe to when you call it:

addReview(author, description) {
    const uri = 'http://localhost:8000/movies/comments/';
    const obj = {
        author: author,
        description: description
    };
    return this.http.post(uri, obj);
}

注意:您需要更改处理订阅服务调用的方式.您可以在角度指南中了解更多有关其工作原理的信息.您的服务电话应更改为:

NOTE: You need to change the way you handle the subscribe to the service call. You can read more about how that works in the angular guide. Your service call should change to:

this.moviesService.addReview(author, description).subscribe(success => {
    this.flashMessages.show('You are data we succesfully submitted', { cssClass: 'alert-success', timeout: 3000 });
    this.route.navigate(['/movie']);
}, error => {
    this.flashMessages.show('Something went wrong', { cssClass: 'alert-danger', timeout: 3000 });
    this.route.navigate(['/movie']);
});

这篇关于Angular 6:类型为void的订阅不存在的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！