代码之家 › 专栏 › 技术社区 › nightingale2k1

(6)数据不会重新加载

angular6 angular

0

nightingale2k1 · 技术社区 · 6 年前

我使用angular6,在我更新/创建了一个对象并重新加载了所有的数据之后,我遇到了一个问题,看起来旧的数据被重新加载了。我试着添加随机数,但效果不太好。

我的代码如下:

在我的服务中:

 getPayCalendars(): Observable<PayCalendar[]>
 {
   return this.authHttp.get<PayCalendar[]>(this.baseUrl+"payCalendar/all"+"?rand="+Math.random());   
}

在我的组件中:

reloadPayCalendars()
  {
      console.log("RELOAD PAYCALS");
    this.adminSettingService.getPayCalendars().subscribe(
        (result) => {
            this.payCalendars = result; 
            console.log(`Result: ${JSON.stringify(result)}`);
        }, error => {
            this.alertify.error("Error: Cannot retrive pay calendars");
        }
    );
  }

在使用EventEmitter保存子组件的数据后,将从此方法调用ReloadCalendars()。我看到数据库里的数据发生了变化。

updatingData(result: any)
  {        
    this.reloadPayCalendars();
    this.modalRef.hide();
  }

<app-form-paycalendar
            [id]="id"
            [name]="name"
            [frequency]="frequency"
            [payPeriodStartDate]="payPeriodStartDate"
            [payPeriodEndDate]="payPeriodEndDate"
            [nextPaymentDate]="nextPaymentDate"
            (onSubmit)="updatingData($event)"></app-form-paycalendar>

我添加了另一个按钮来调用reloadPayCalendars(),它得到了新的/更新的数据。

<button type="button" class="btn btn-primary" (click)="reloadPayCalendars()"> Reload </button>

如何解决这个问题?

仅供参考:后端使用带C的dotnetcore2.1。

编辑时间: 添加用于保存/更新数据的组件

子组件:

save()
  {
    let payCalendar = this.editForm.getRawValue();
    if(payCalendar.id != null){
        this.adminService.updatePayCalendar(payCalendar).subscribe(
            result => {
                payCalendar = result ; 
                this.alertify.success("Update Pay Calendar Successfully");
            }, error => {   
                this.alertify.error(error);
            }
        );
    }else {
        this.adminService.createPayCalendar(payCalendar).subscribe(
            result => {
                payCalendar = result ; 
                this.alertify.success("Update Pay Calendar Successfully");
            }, error => {   
                this.alertify.error(error);
            }
        );
    }
    this.onSubmit.emit({payCalendar: payCalendar});
  }

因此,在调用此方法之后,它将向父级和上面名为“updateData()”的父级发出。

1 回复 | 直到 6 年前

1

0

nightingale2k1 6 年前

我找到了解决办法。当创建/更新仍在后台进行时,我检索数据。因此,我在完成创建/更新数据之后发出事件。

save()
  {
    let payCalendar = this.editForm.getRawValue();
    let opResult: PayCalendar[] ; 
    if(payCalendar.id != null){
        this.adminService.updatePayCalendar(payCalendar).subscribe(
            result => {
                opResult = result;
                this.alertify.success("Update Pay Calendar Successfully");
                **this.onSubmit.emit({payCalendars: opResult});**
            }, error => {   
                this.alertify.error(error);
            }
        );
    }else {
        this.adminService.createPayCalendar(payCalendar).subscribe(
            result => {
                opResult = result;
                this.alertify.success("Create Pay Calendar Successfully");
                **this.onSubmit.emit({payCalendars: opResult});**   
            }, error => {   
                this.alertify.error(error);
            }
        );
    }
  }