Question

我有一个表单，我想在用户单击“提交”后显示成功消息

这是我所拥有的。

 <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 { FlashMessagesService } from 'angular2-flash-messages';
import { Router } from '@angular/router';
@Component({
  selector: 'app-movie',
  templateUrl: './movie.component.html',
  styleUrls: ['./movie.component.scss']
})
export class MovieComponent implements OnInit {
  movie: object;
  review: {};
  addreview: {};
  addreviews: any[];
  angForm: FormGroup;
  // tslint:disable-next-line:max-line-length
  constructor(private _flashMessagesService: FlashMessagesService, private fb: FormBuilder, private route: Router, private http: HttpClient, private activeRouter: ActivatedRoute, private moviesService: MoviesService) {
    this.movie = [];
    this.review = [];
    this.addreviews = [];
    this.createForm();
  }
  createForm() {
    this.angForm = this.fb.group({
      author: ['', Validators.required],
      description: ['', Validators.required]
    });
  }
  addReview(author, description) {
    this.moviesService.addReview(author, description);
    this._flashMessagesService.show('Your comment was successfully added');
  }
  ngOnInit() {

  }
}

当用户单击“提交”按钮时，一切正常，数据已提交并保存到数据库，但未显示任何闪烁消息，例如，您的注释已成功添加'我需要更改什么才能显示成功消息？

Answer 1

根据您的代码，我想您错过了包含用于在HTML中显示Flash消息的容器的问题。将此内容添加到您要显示Flash消息的位置的html中。

    <flash-messages></flash-messages>

Answer 2

您是否在浏览器窗口的控制台中看到任何错误。

确保必须在app.module.ts文件中添加FlashMessagesModule

import { FlashMessagesModule } from 'angular2-flash-messages';

@NgModule({
    imports: [        
        FlashMessagesModule.forRoot(),
    ]
})

将此标签添加到您的应用组件文件中

<flash-messages></flash-messages>

有关更多详细信息，请访问官方网站。 https://www.npmjs.com/package/angular2-flash-messages

我希望它会有所帮助。

显示成功消息

2 个答案: