时间戳

首页 > 解决方案 > Angular 6： void 类型不存在订阅

angular - Angular 6： void 类型不存在订阅

问题描述

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

提交数据时表单工作得很好，但没有显示 Flash 消息，我收到错误：订阅不存在于 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>

组件.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 一个

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 组件。

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

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

标签： angulartypescriptobservable

解决方案

您addReview()在服务中的方法没有返回任何内容。无需订阅post()服务内部的调用，只需返回post()方法即可。这将使该方法返回一个可观察的对象，您可以在调用它时订阅它：

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

注意：您需要更改处理订阅服务调用的方式。您可以在angular guide中阅读有关其工作原理的更多信息。您的服务调用应更改为：

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']);
});

推荐阅读