显示成功信息答案

【问题标题】：Display success message显示成功信息
【发布时间】：2018-06-20 15:24:57
【问题描述】：

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

这就是我所拥有的。

 <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() {

  }
}

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

【问题讨论】：

您或许可以添加引导警报以向用户显示反馈消息。
@bradmcallister hii 你能给我看看例子吗？我对这些东西很陌生
@bradmcallister 我需要在哪里添加该警报？
警报文档可以在这里找到：ng-bootstrap.github.io/#/components/alert/examples。您可能希望将警报设置为显示在您拥有 flashMessagesService 的位置。
我知道我的问题。我不知道实现它有多合适，你可以看到它:(你能提供一些类似的例子吗？

标签： node.js angular html express

【解决方案1】：

根据您的代码，我猜您错过了包含一个用于在您的 html 中显示的 flash 消息的容器。将此添加到您的 html 中您想要显示 Flash 消息的任何位置。

    <flash-messages></flash-messages>

【讨论】：

我在应用程序组件中有那个:) addReview(author, description) { this.moviesService.addReview(author, description); this._flashMessagesService.show('Your comment was successfully added'); } something is wrong here 并且在 html 中有问题你能举一个可行的例子吗？ @yer

【解决方案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

希望对你有帮助。

【讨论】：