防止Mat对话框在angular7中关闭

Question

我正在使用Web API在angular7中创建项目，但问题是当我单击按钮打开对话框时，它会自动关闭，因此我无法在对话框中执行任何操作。

export class OrderComponent implements OnInit {

  constructor(public service: OrderService , private dialog: MatDialog) { }

  ngOnInit() {
    this.resetForm();
  }

  resetForm(form?: NgForm) {
     if (form = null) {
     form.resetForm();
    }
     this.service.formData = {
       OrderID: null,
       OrderNo: Math.floor(100000 + Math.random() * 900000).toString(),
       CustomerID: 0,
       PMethod: '',
       GTotal: 0,
     };
     this.service.orderItems = [];
  }
  AddOrEditOrderItem(orderItemIndex, OrderID) {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.autoFocus = true;
    dialogConfig.disableClose = true;
    dialogConfig.width = '50%';
    dialogConfig.data = {orderItemIndex , OrderID };
    this.dialog.open( OrderItemsComponent , dialogConfig);
  }

}

在这里，我采取了AddOrEditOrderItem（）函数来打开对话框，但是 打开对话框后，刷新页面

这是我的应用路由代码

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OrderComponent } from './orders/order/order.component';
import { OrdersComponent } from './orders/orders.component';


const routes: Routes = [

  {path: '' , redirectTo: 'order' , pathMatch: 'full' },
  {path: 'orders' , component: OrdersComponent},
  {path: '' , children: [
    {path: 'order' , component: OrderComponent},
    {path: 'edit/:id' , component: OrderComponent}
  ]}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这是我的HTML组件文件

<form  #form= "ngForm" autocomplete="off" *ngIf="service.formData">
 <div class="row">
   <div class="col-md-6">
     <div class="form-group">
       <label>Order No.</label>
       <div class="input-group">
        <div class="input-group-prepend">
            <div class="input-group-text">#</div>
        </div>
        <input name="OrderNo" #OrderNo="ngModel" [(ngModel)]="service.formData.OrderNo" class="form-control" readonly/>
       </div>
     </div>
     <div class="form-group">
      <label>Customer</label>
      <select name="CustomerID" #CustomerID="ngModel" [(ngModel)]="service.formData.CustomerID" class="form-control">
        <option value="0"></option>
      </select>
    </div>
   </div>
   <div class="col-md-6">
    <div class="form-group">
      <label>Payment Method</label>
      <select name="PMethod" #PMethod="ngModel" [(ngModel)]="service.formData.PMethod" class="form-control">
        <option value="">-select-</option>
        <option value="Cash">Cash</option>
        <option value="Card">Card</option>
      </select>
    </div>
    <div class="form-group">
      <label>Grand Total</label>
      <div class="input-group">
        <div class="input-group-prepend">
            <div class="input-group-text">$</div>
        </div>
        <input name="GTotal" #GTotal="ngModel" [(ngModel)]="service.formData.GTotal" class="form-control" readonly/>
       </div>
    </div>
   </div>
 </div>
 <!---order items table-->
<table class="table table-borderless">
  <thead class="thead-light">
    <th>Food</th>
    <th>Price</th>
    <th>Quantity</th>
    <th>Total</th>
    <th>
      <a href="" class="btn btn-sm btn-success text-white" (click)="AddOrEditOrderItem(null,service.formData.OrderID)"><i class="fa-fa-plus"></i>Add Item</a>
    </th>
  </thead>
  <tbody>
    <tr *ngIf="service.orderItems.length==0">
      <td class="font-italic text-center" colspan="5">
        No food item select for this order.
      </td>
    </tr>
    <tr *ngFor="let item of service.orderItems; let i=index">
      <td>{{item.ItemName}}</td>
      <td>{{item.Price}}</td>
      <td>{{item.Quantity}}</td>
      <td>{{item.Total}}</td>
      <td>{{item.Quantity}}</td>
      <td>
          <a href="" class="btn btn-sm btn-info text-white" (click)="AddOrEditOrderItem(i,service.formData.OrderID)"><i class="fa-fa-pencil"></i></a>
      </td>
    </tr>
  </tbody>
</table>


 <div class="form-group">
   <button type="submit" class="btn btn-dark"><i class="fa fa-database"></i>Submit</button>
 </div>
</form>

当我单击“添加项目”按钮时，它会打开对话框，但会自动关闭。