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

问题描述

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

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

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

产品.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);
   }
  }

创建-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");
   });
  }
 }

创建-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>

标签： javascripthtmlangulartypescript

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

问题描述

解决方案

推荐阅读