Question

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

表单在提交数据时非常完美，但是没有显示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>

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 一个

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>

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

Answer 1

您的服务中的if attack == "sword" or attack == "arrow" or attack == "magic": #rest of code here方法未返回任何内容。无需订阅服务内的addReview()调用，只需返回post()方法即可。这将使该方法返回一个可观察的对象，您可以在调用该方法时对其进行订阅：

post()

注意：您需要更改处理订阅服务呼叫的方式。您可以在the angular guide中详细了解其工作原理。您的服务电话应更改为：

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

Angular 6：类型为void的订阅不存在

1 个答案: