Question

我设法在Angular 5中创建了一个表单，我的问题是如何在用户提交表单后重新加载页面。

我需要重新加载页面，因此新添加的元素将显示在数据表中，这是从数据库中获取现有元素（使用来自HTTP客户端方法的Async订阅）

所以这就是我需要做的事情：

用户填写表格
POST查询=＆gt;我的API（回复OK）
显示通知
那时我需要找到一种方法重新加载页面或更新现有的Datatable

这是表格代码：

    <form [formGroup]="BillForm" (ngSubmit)="onSubmit()">
        <div class="col-12">
            <div class="row">
........
...............

    <div class="ml-auto">
        <input type="submit" class="btn btn-finish btn-fill btn-rose btn-wd" name="finish" value="Confirm"
               [disabled]="BillForm.invalid">

    </div>
</form>

现在这是Onsubmit方法：

  onSubmit() {
        var newBill = this.BillForm.value;
        newBill.CreatedAt = new Date();
        console.log(newBill);
        this.billservice.getCustomerId()
            .subscribe(
                res1 => {
                    console.log('this.BillService.getMonitorId', res1['Customer_id']);
                    this.billservice.getMonitorId(res1['Customer_id'])
                        .subscribe(
                            result => {
                                this.billservice.addBill(result['Monitor_id'], newBill)
                                    .subscribe(
                                        res => {console.log(res);
                                            if (res['result'] === 'Bill Added Successfully') {
                                                this.showNotification('bottom', 'right', 'success');
                                            }}
                                    );
                            });
                });
    }

它工作得很完美我只需要为用户做得更好，现在它只是将元素添加到表中但我需要手动重新加载以查看表上的更改

这就是我获取dataTable数据的方式：

this.BillService.getCustomerId（）。订阅（ res1 =＆gt; { console.log（'this.BillService.getMonitorId'，res1 ['Customer_id']）; this.BillService.getMonitorId（RES1 [ 'CUSTOMER_ID']）。订阅（ result =＆gt; {

                            this.BillService.getBills(result['Monitor_id'])
                                .subscribe(res => {
                                    this.dataTable = {
                                        headerRow: ['#', 'Amount', 'Created at', 'From', 'To', 'Payment Status', 'Payment Date', 'Actions'],
                                        dataRows: res['result'][0]['Bills']
                                    };
                                        setTimeout(function () {
                                        self.initTable();
                                    }, 10); });
                        });
            });

并在视图中：

                                <tr *ngFor="let row of dataTable.dataRows">
                                    <td>{{row.Amount}}</td>
                                    <td>{{row.CreatedAt | date:'mediumDate'}}</td>
                                    <td>{{row.From | date:'mediumDate'}}</td>
                                    <td>{{row.To | date:'mediumDate'}}</td>

页面未在表单上重新加载提交角度5

0 个答案: