Angular-7中如何提交后立即展示已保存的报价数据

我看了你的代码，目前提交后直接跳转到成功页面，所以没法在原页面展示刚提交的数据。要实现这个需求，我们需要调整后端返回数据，同时修改前端的提交逻辑和页面模板，具体步骤如下：

1. 修改Laravel后端：返回刚创建的完整记录 #

现在你的createClientQuote方法只返回成功消息，我们需要把刚保存的$clientquote实例也返回给前端，这样Angular就能拿到完整的提交数据。

修改ApiController.php的返回部分：

// 原返回代码
// return response()->json([
//     'message' => 'Quote Successfully Sent!'
// ], 201);

// 修改后
return response()->json([
    'message' => 'Quote Successfully Sent!',
    'quote' => $clientquote // 新增这行，返回刚创建的记录
], 201);

2. 修改Angular组件：存储并处理返回的报价数据 #

首先在client.component.ts中添加一个变量来保存刚提交的报价，然后修改onSubmit方法，去掉跳转逻辑，把返回的报价数据赋值给这个变量，同时保留成功提示（可选清空表单）。

修改后的client.component.ts关键部分：

import { Component, OnInit, ElementRef, NgZone, ViewChild, NgForm } from '@angular/core'; // 新增NgForm导入
// ... 其他原有导入

export class ClientQuotesLandingComponent implements OnInit {
    // 新增变量，用于存储刚提交的报价
    submittedQuote: any = null;
    @ViewChild('clientquoteForm') clientquoteForm: NgForm; // 获取表单引用，用于重置

    // ... 其他原有代码

    onSubmit(){
        this.notify.clear();
        var header = {
            'Content-Type': 'application/json'
        }
        return this.api.post('clientquotelanding', this.form, header).subscribe(
            response => {
                // 去掉跳转，改为保存返回的报价数据
                // this.router.navigateByUrl('/client-quote-landing-success')
                this.submittedQuote = response.quote; // 保存刚创建的报价
                this.notify.success(response.message); // 显示成功提示
                
                // 可选：清空表单内容和状态
                this.form = {
                    first_name : null,
                    last_name : null,
                    email : null,
                    phone : null,
                    address : null,
                    business_name : null,
                    truck_required : null,
                    truck_type : null,
                    quote_origin : null,
                    quote_destination : null,
                    commodity : null,
                    loading_date : null,
                    comment : null,
                };
                this.clientquoteForm.resetForm();
            },
            error => this.errorHandle(error),
        );
    }

    // ... 其他原有代码
}

3. 修改HTML模板：添加即时展示区域 #

在表单下方添加一个区域，当submittedQuote有值时，展示刚提交的报价数据。你可以根据需求调整展示的字段和样式：

<!-- 原有表单代码 -->
<form class="form-clientquote" #clientquoteForm=ngForm (ngSubmit)="onSubmit()">
    <!-- ... 表单内容 ... -->
</form>

<!-- 新增：提交成功后展示报价的区域 -->
<div *ngIf="submittedQuote" class="card mt-4">
    <div class="card-header">
        <h5>您刚提交的报价信息</h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <p><strong>取货地点:</strong> {{ submittedQuote.quote_origin }}</p>
                <p><strong>目的地:</strong> {{ submittedQuote.quote_destination }}</p>
                <p><strong>卡车类型:</strong> {{ submittedQuote.truck_type }}</p>
                <p><strong>货物类型:</strong> {{ submittedQuote.commodity }}</p>
            </div>
            <div class="col-md-6">
                <p><strong>所需卡车数量:</strong> {{ submittedQuote.truck_required }}</p>
                <p><strong>联系人:</strong> {{ submittedQuote.first_name }} {{ submittedQuote.last_name }}</p>
                <p><strong>邮箱:</strong> {{ submittedQuote.email }}</p>
                <p><strong>装载日期:</strong> {{ submittedQuote.loading_date | date:'yyyy-MM-dd HH:mm' }}</p>
            </div>
        </div>
    </div>
</div>

额外说明 #

如果你的需求是展示所有历史报价（包括刚提交的），那还需要新增一个Laravel接口来获取所有报价数据，在提交成功后调用该接口刷新列表。但根据你的描述，只需要展示刚提交的单条数据，上面的方案就完全够用了。

内容的提问来源于stack exchange，提问作者ayobamilaye