crud 操作后无需重新加载即可刷新角度材料表

Posted 2023-02-22

【中文标题】crud 操作后无需重新加载即可刷新角度材料表

【英文标题】：Refresh angular material table without reload after crud operation

【发布时间】：2020-06-24 13:35:14

【问题描述】：

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

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

表单的 html 代码是 regiondetails.html

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

    <mat-toolbar color="primary" >
            <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->
        <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')

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

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

【问题讨论】：

在成功插入/更新后再次调用您从中获取数据的函数。

我已经这样做了，但表格中的数据仍然没有刷新

也许你需要等待帖子完成才能再次运行函数以获取列表 this.http.post(this.apiurl,region) .subscribe( data => // 调用列表api );

【参考方案1】：

您可以使用 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))

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