（Angular 6）数据不会重新加载答案

【问题标题】：(Angular 6) Data won't reloaded（Angular 6）数据不会重新加载
【发布时间】：2018-09-24 10:39:00
【问题描述】：

我使用 Angular 6，在更新/创建对象并重新加载所有数据后出现问题，似乎旧数据已重新加载。我尝试添加随机数，但它也不起作用。

我的代码如下：

在我的服务中：

 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()，它得到了新的/更新的数据。

&lt;button type="button" class="btn btn-primary" (click)="reloadPayCalendars()"&gt; Reload &lt;/button&gt;

如何解决这个问题？

仅供参考：后端使用 Dotnet Core 2.1 和 C#。

编辑：添加我用来保存/更新数据的组件

儿童组件：

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});
  }

所以在这个方法被调用后，它会发送给父级，父级上面称为“updatingData()”。

【问题讨论】：

this.payCalendars和result都是array of objects吗？
您能否在子组件中显示保存后发出事件的代码？
“使用 EventEmitter 从子组件保存数据后，从该方法调用 ReloadCalendars()”。你在订阅中做到了吗？否则，获取数据的调用发生在更新调用结束之前发生
@JavascriptLover-SKT 是的。
@nightingale2k1 好的，据我了解，即使result 包含新数据，this.payCalendars 仅显示旧数据，是这个问题吗？

标签： angular angular6

【解决方案1】：

我找到了解决方案。我在后台仍在进行创建/更新时检索数据。所以我在完成创建/更新数据后立即发出事件。

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);
            }
        );
    }
  }

【讨论】：