在发布请求 Angular 9 后显示引导警报成功答案

【问题标题】：Show Bootstrap Alert success after post request Angular 9在发布请求 Angular 9 后显示引导警报成功
【发布时间】：2020-09-23 15:29:20
【问题描述】：

我是 Angular 9 的新手。我正在尝试发出一个 http post 请求，然后显示一个引导警报对话框以显示 post 请求是否已成功完成。

我尝试使用 *ngIf 指令，但页面刷新后警报消失。

我想显示警报 div 大约 3 秒，然后消失

product.service.ts

 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Product } from './product';
 import { Observable } from 'rxjs';
 import { Category } from './category';

 @Injectable({
 providedIn: 'root'
 })
 export class ProductsService
 {

   constructor(private httpClient: HttpClient) { }

   createProduct(productBody: any) : Observable<Product>
   {
     const urlEndpoint = 'http://localhost:3000/products';
     return this.httpClient.post<Product>(urlEndpoint, productBody);
   }
  }

create-product.component.ts

import { Component, OnInit } from '@angular/core';
import { Form } from '@angular/forms';
import { ProductsService } from '../products.service';
import  Swal  from 'sweetalert2';

@Component({
 selector: 'app-create-product',
 templateUrl: './create-product.component.html',
 styleUrls: ['./create-product.component.css']
 })
 export class CreateProductComponent implements OnInit
 {

   constructor(private productService : ProductsService) { }

   insertedSuccess : boolean = false;

   ngOnInit(): void
   {
   }

   addNewProduct(form : any, event : Event)
   {
     let newProduct =
     {
      id: 20,
      category_id: form.value.product_category,
      productName: form.value.product_name,
      description: form.value.product_description,
      product_image: 'form.value.path',
      price: form.value. product_price,
      is_available: form.value.product_available,
      rating: form.value.product_rating,
      reviews: form.value.product_reviews,
      color: form.value.product_color
     };

    this.productService.createProduct(newProduct).subscribe(data =>
    {
      event.preventDefault();
      Swal.fire("Good!", "Product Created Successfully", 'success');
    },
    error1=>
   {
     console.log("error");
   });
  }
 }

create-product.component.html

<div class="alert alert-success alert-dismissible" *ngIf="insertedSuccess">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  ARTICLE INSERTED SUCCESSFULLY!
</div>

如您所见，我使用了 ngIf 指令。如前所述，div 显示时间很短。 我想在post请求成功执行后放置div，以表明产品已正确插入

编辑

<form (ngSubmit)="addNewProduct(addProductForm, $event)" #addProductForm="ngForm">
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">Product Name</label>
      <input type="text" class="form-control" placeholder="Enter Product Name" required name="product_name" ngModel>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">Category ID</label>
      <input type="text" class="form-control" required name="product_category" ngModel>
    </div>
   </div>
   <div class="form-row">
     <div class="col-md-6 mb-3">
       <label for="validationServer03">Description</label>
       <textarea type="text" class="form-control" placeholder="Enter Product Description" required name="product_description" ngModel>
       </textarea>
     </div>
     <div class="col-md-6 mb-3">
        <label>Rating</label>
        <select class="custom-select" required name="product_rating" ngModel>
          <option selected value="">Choose..</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
      </div>
    </div>
    <div class="form-row">
      <div class="col-md-6 mb-3">
         <label for="validationServer04">Product Color</label>
         <input type="text" class="form-control" placeholder="Enter Product Color" required name="product_color" ngModel>
      </div>
      <div class="col-md-6 mb-3">
         <label>Is Available</label>
         <select class="custom-select" required name="product_available" ngModel>
         <option selected value="">Choose..</option>
         <option value="Yes">Yes</option>
         <option value="No">No</option>
       </select>
      </div>
    </div>
    <div class="form-row">
       <div class="col-md-6 mb-3">
         <label for="validationServer05">Product Price</label>
         <input type="number" class="form-control" placeholder="Enter Product Price" required name="product_price" ngModel>
       </div>
       <div class="col-md-6 mb-3">
       <label>Reviews</label>
       <select class="custom-select" required name="product_reviews" ngModel>
           <option selected value="">Choose..</option>
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
           <option value="4">4</option>
           <option value="5">5</option>
         </select>
        </div>
      </div>

     <button type="submit" class="btn btn-primary">Submit Form</button>
   </form>

【问题讨论】：

alert fades after the page refreshes -> 为什么页面在刷新，当页面刷新时，警报明显消失
@SivakumarTadisetti 如果我将 insertSuccess 变量设置为 true，它不应该褪色，因为 ngIf 表达式为 true...页面刷新，因为发布请求已被执行
那么，您的情况如何？一旦变量设置为true，它会消失吗？
这就是我的疑问。发布请求不会刷新页面，但在您的情况下如何刷新？你能分享订阅中的完整代码吗？
@SivakumarTadisetti 这是完整的代码。我没有插入完整的 html，因为它很长。在我点击表单中的提交按钮后，请求成功完成并刷新页面

标签： javascript html angular typescript

【解决方案1】：

请尝试将<button type="submit"></button> 更改为<button type="button" (click)="addNewProduct(addProductForm)"。

刷新必须是由默认浏览器提交行为引起的。

希望对您有所帮助。如果没有，请恢复。谢谢

【讨论】：

您可以尝试删除表单中的 (ngSubmit) 吗？由于您已经在按钮单击时发布了表单值，我想它是不需要的。
否，尝试删除 ngSubmit 指令，添加 preventDefault() 方法，将按钮从提交更改为按钮，但没有任何效果

【解决方案2】：

找到了问题所在。由于我使用的是 VSCode 和 json-server 并且自动启用了 WDS 自动重新加载，因此当我正确添加新产品时，它会自动刷新所有内容，从而使警报消失！

【讨论】：