仅在 angular 8 中获得表单提交响应后才显示模式

Question

当单击 Angular 8 中的提交按钮时，我正在调用一个弹出窗口，但它在获得响应之前立即显示，因此我需要在获得响应后才显示模式。 有人可以帮我做这件事吗？

这是.html

   <div class="modal fade cust_modal save_qut_po" id="sav-popup" tabindex="-1" role="dialog" aria-labelledby="sav-qot-popup" aria-hidden="true">

      <input type="submit" class="upload-submit btn btn-primary" value="{{'Save Quotation' | translate}}" data-toggle="modal" data-target="#sav-qot-popup"  [disabled]="!Form.form.valid" />

这是我的.ts代码.. 想要在收到605 响应后显示弹出窗口

quotationNo: any;
  onSubmit(quotationForm: NgForm, saveQuotation) {
    try {
      
        if (quotationForm.form.valid) {
        this.submitted = false;
        if (this.quotationType)
          this.motorQuotation.quotationType = this.quotationType;
        this.motorQuotation.addDriver = this.driverList;
        this.motorQuotation.premiumDetails = this.premiumDetail;

        //var formData = new FormData();
        //formData.append('motorQuotation', JSON.stringify(this.motorQuotation));


        var formData = this.getFormValue();
        this.ruleExecutionResult = this.executeRule();
        if (!this.ruleExecutionResult) {
          formData.append("actionName", "NEW");
          this.quotationCalculation();
        }
        else {
          formData.append("actionName", "APPROVAL");
        }
        if (formData) {
         // this.spinner.show();
          this.apiCall.getResponseByPostWithoutToken(this._commonService.quotationFormSubmit, formData).then(
            result => {
              if (result.data) {
                if (result.statusCode == 606) {
                  this.toastr.error("Error in commiting the data.");
                }
                if (result.statusCode == 605 && this.ruleExecutionResult) {
                  this.toastr.info("Quotation " + result.data.responseMessage + " send for underwriter approval.");
                  this.quotationUnderwriter = true;
                  this.quotationSuccess = false;
                  this.isShowPopup = false;


                }
                if (result.statusCode == 605 && !this.ruleExecutionResult) {
                  this.toastr.success("Quotation no is: " + result.data.responseMessage);
                  this.quotationNo = result.data.responseMessage;
                  this.quotationSuccess = true;
                  this.quotationUnderwriter = false;
                  this.sample = true;
                  this.ref.detectChanges();
                  this.isShowPopup = false;
                  // this.loginButton.getNativeElement().click();
                  
                }
              }
              this.spinner.hide();
            });
         
        }
      }
      else {
        this.spinner.hide();
        this.submitted = true;
      }

Answer 1

1. 声明一个服务 [ ng gs service_name ]，让我们在那里放一个变量。 可以说它被称为savedResponse [不要给出类型]。 我们将它用作中间件。 （我建议您使用 Angular http 客户端 - 充分利用 fetch 方法的优势）
2. 我猜您正在使用“X”组件来调用“Y”组件的模态。 所以在调用模态之前：
3. 在服务中使用 Angular Http 客户端 class
4. 然后在你的“X”组件中写一个async function
5. 然后在您的async function 中写入await response.json（响应是您的响应）-它将等待响应
6. 然后将您的响应值保存在服务 class savedResponse变量中
7. 最后，当您调用模态时，只需从服务 class 中获取价值。 （不是来自“X”组件或响应）

[我希望我能看到你的 typescript 代码，这样我就可以告诉更多。 据我了解 - 这与HTML 无关。 HTML仅显示数据，如果您需要较慢的执行- 从typescript执行 - 等待响应（在async函数中使用await方法） - 然后显示它]

让我给你举个例子：

这是我的data.service.ts 。 我在这里收到来自 API 的数据

import { Injectable } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { HttpClient } from '@angular/common/http';

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

  constructor(private httpCLient: HttpClient) { }

  navigateFromDisplayFlag = 0;
  currentPurchase;

  setPurchase(purchase) {
    this.currentPurchase = purchase;
  }

  getPurchase()
  {
    return this.currentPurchase;
  }

  GetPurchases() {
    return fetch(('http://localhost:3000/purchases'));
  }

}

这是我的组件 class

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import { Routes, RouterModule, Router } from '@angular/router';

@Component({
  selector: 'app-items-display',
  templateUrl: './items-display.component.html',
  styleUrls: ['./items-display.component.css']
})
export class ItemsDisplayComponent implements OnInit {
  purchases: any;

  constructor(private dataService: DataService, private router: Router) {
    this.GetPurchases();
  }

  ngOnInit(): void {
  }

  async GetPurchases() {
    const response = await this.dataService.GetPurchases();
    const dataService = await response.json();
    this.purchases = dataService;
  }

}

你可以看到：

1. 我正在使用async方法，在其中我正在等待使用await的响应
2. 当我收到回复时，我将其保存在一个变量中
3. 将 api 响应保存到某个变量后，您可以在任何您想要的地方使用它。
4. 查看我的代码，我只需要 2 个类，也许您正在使用更多类，编写一个异步方法并将您的 Api 响应保存到一个变量。 然后在模态中使用来自新变量的数据。