0

嗨，我正在使用 angular(v.9)，我正在使用 asp .net core web api 和 ef core(v 3.1) 进行 crud 操作

我有区域组件形式，我在这里用作对话框 区域形式

表单的 html 代码是regiondetails.html

<form [formGroup]="service.form"  (submit)="onsubmit()" min-width="200px">

    <mat-toolbar color="primary" width="auto">
            <span>Region</span>

    <span class="fill-remainings"></span>   
    <span>  <button mat-button matSuffix mat-icon-button arial-label="Clear" tabindex="1" (click)="onclose()"><mat-icon>close</mat-icon></button></span>      
    </mat-toolbar><br>
    <mat-grid-list cols="1" rowHeight="300px" min-width="100px">
        <mat-grid-tile>
            <div class="controles-container">
                <input formControlName="Id" type="hidden">
                <mat-form-field>
                    <input maxlength="6" formControlName="Code"  (keyup)= "service.checkcode()"matInput placeholder="Code*"  tabindex="2" autocomplete="off">
                    <mat-error *ngIf="service.form.controls['Code'].errors?.required">the field should not be empty</mat-error>
                    <mat-error *ngIf="service.form.controls['Code'].errors?.pattern">Enter only Alphabetic characters</mat-error>
                    <mat-error *ngIf="service.form.controls['Code'].errors?.notUnique">Code already exist</mat-error>
                </mat-form-field><br><br>
                <mat-form-field>
                    <input maxlength="50" formControlName="Description" matInput placeholder="Description*" tabindex="3" autocomplete="off" >
                    <mat-error *ngIf="service.form.controls['Description'].errors?.required">the field should not be empty</mat-error>
                    <mat-error *ngIf="service.form.controls['Description'].errors?.pattern">Enter only  Alphabetic characters</mat-error>
                </mat-form-field>

                <h2 class="example-margin">Active</h2>

                    <mat-slide-toggle
                          class="example-margin" [checked]=lstatus color="primary"  tabindex="4" (change)="toggle($event)"
                          formControlName="Active">
                          <label class="labeltoggle">{{Active}}</label>
                    </mat-slide-toggle>

                    <div class="button-row">

             <button mat-raised-button class="btn warning btn-xs" type="submit" tabindex="5"  [disabled]="service.form.invalid" >Save</button>
             |<button mat-raised-button class="btn btn-primary btn-xs"
                 (click)="onclear()" tabIndex="6" [disabled]= "clear">Clear</button>
            </div>
             </div>
            </mat-grid-tile>
    </mat-grid-list>


</form>

ts 文件RegionDetails.ts

onsubmit() {
     debugger
     if (this.service.form.valid) {
       if (this.service.form.get('Id').value) {
          this.service.updateregion(this.service.form.value).subscribe(
           res =>{ this.service.form.reset();
          this.dialogref.close();
        this.notificationService.update('updated Successfully');
           },
           err => {
             console.log(err);
           }
          );

       } else {
         this.service.insertregion(this.service.form.value).subscribe(
           res =>{
             this.service.form.reset();
         this.dialogref.close();
         this.service.initializeForm();
       this.notificationService.success('submitted Successfully');
           },
           err => {
             console.log(err);
           }
         );

       }
     }
   }

服务中的插入区域功能

insertregion(region: Region) {
    console.log(region);
   return this.http.post(this.apiurl,region);
  }

我的材料表是这样的...... 在此处输入图像描述

在桌子上创建按钮功能

oncreate() {
   this.service.form.reset();
   this.service.initializeForm();
  const dialogconfig = new MatDialogConfig();
  dialogconfig.disableClose = false;
  dialogconfig.autoFocus = true;
  dialogconfig.width = '400px';
  this.dialog.open(RegionDetailsComponent, dialogconfig);
    this.router.navigateByUrl("Region")
}

我使用按钮单击来刷新页面按钮单击的功能是

buttonClick() {
  this.router.navigateByUrl('Country');
  this.router.onSameUrlNavigation;
  this.router.navigateByUrl('Region')
}

当我执行插入操作时，表没有自动刷新，但它在数据库中得到更新， 只有在我路由到其他 url 或重新加载页面后才会刷新....

任何人都给我一个解决方案来刷新表格和页面而无需重新加载并在材料表中插入数据.....提前谢谢

4

1 回答 1

0

您可以使用Angular 对话框中的afterClosed()方法。因此，当模式关闭时，您再次调用您的 API。

当您关闭模式时，您必须发送新的区域值

oncreate() {
  this.dialog
    .open(RegionDetailsComponent, dialogconfig)
    .afterClosed()
      .pipe(
        filter(newValues => !!newValues) // If you have formValues
      ).subscribe(newValues => {
      // YOU HAVE TO REPLACE YOUR TABLE CONTENT WITH newValues
    });
}

在你的 modal.ts

onsubmit() {
  this.service.updateregion(this.form.value)
    .subscribe(values => this.dialogref.close(values))
}

请注意，您可以走得更远。我没有测试过这段代码。

于 2020-03-12T14:18:15.983 回答