数据以角度更新后不刷新

问题描述 投票:0回答:1

嗨,我有一个页面的工作代码,我可以在其中更新一些字段(星期几,开放时间和关闭时间)。我可以通过单击更新按钮(在日志中也将数据发送到服务器端)成功更新它,并且它导航到表以获取更新的数据,但是有时我不得不再次刷新页面以查看更新的值。我不知道是否是由角度或其他原因引起的。预先感谢。

这是我的代码:

import { Component, OnInit, Inject } from '@angular/core';
import { Router } from "@angular/router";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { first } from "rxjs/operators";
import { RegularDaysService, RegularDays } from '../service/regular-days.service'
@Component({
  selector: 'app-edit-regulardays',
  templateUrl: './edit-regulardays.component.html',
  styleUrls: ['./edit-regulardays.component.css']
})
export class EditRegularDaysComponent implements OnInit {

  regDay: RegularDays;
  editForm: FormGroup;

 constructor(
    private router: Router,
    private httpClientService: RegularDaysService,
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    let regDayId = window.localStorage.getItem("editRegularDaysId");
    if (!regDayId) {
      alert("Invalid action.")
      this.router.navigate(['regulardays']);
      return;
    }
    this.editForm = this.formBuilder.group({
      id: [],
      dayOfWeek: [''],
      openFrom: ['', Validators.required],
      openTo: ['', Validators.required],
    });
    console.log(this.editForm.value);
    this.httpClientService.getRegularDaysById(+regDayId)
      .subscribe(data => {
        this.regDay = data;
        this.regDay.dayOfWeek = this.formatNumbersToDays(this.regDay.dayOfWeek);
        this.regDay.openFrom = this.formatTime(this.regDay.openFrom);
        this.regDay.openTo = this.formatTime(this.regDay.openTo);
        console.log(data);

        this.editForm.setValue(data);
      });
  }

// --some code for formatting data for database--

  onSubmit() {
    let formattedObject = this.formattedRegularDay(this.editForm.value);
    console.log(JSON.stringify(formattedObject));
    this.httpClientService.updateRegularDays(formattedObject)
      .pipe(first())
      .subscribe(
        data => {
          {
            // alert('Day updated successfully.');
            this.router.navigate(['regulardays']);
          }
        },
        error => {
          // alert(error);
        });
  }

}

我的html:

<div class="col-md-6">
  <h2 class="text-center">Edit regular day</h2>
  <form [formGroup]="editForm" (ngSubmit)="onSubmit()">

    <div class="material-input">
      <mat-form-field class="form-group">
        <mat-label>Day of week</mat-label>
        <mat-select formControlName="dayOfWeek" placholder="Day of week">
          <mat-option *ngFor="let day of dayOfWeek" [value]="day">
            {{day}}
          </mat-option>
        </mat-select>
        <mat-error *ngIf="editForm.get('dayOfWeek').errors && (editForm.get('dayOfWeek').touched)">
          Please pick a day
        </mat-error>
      </mat-form-field>
    </div>

    <div class="material-input">
      <mat-form-field class="form-group" appearance="outline">
        <mat-label>Open from</mat-label>
        <input matInput readonly placeholder="Open from" formControlName="openFrom" [ngxTimepicker]="startTimePicker"
          [format]="24">
        <ngx-material-timepicker #startTimePicker></ngx-material-timepicker>
        <mat-error *ngIf="editForm.get('openFrom').errors && (editForm.get('openFrom').touched)">
          This field is required
        </mat-error>
      </mat-form-field>
    </div>

    <div class="material-input">
      <mat-form-field class="form-group" appearance="outline">
        <mat-label>Open to</mat-label>
        <input matInput readonly placeholder="Open to" formControlName="openTo" [ngxTimepicker]="startTimePicker2"
          [format]="24">
        <ngx-material-timepicker #startTimePicker2></ngx-material-timepicker>
        <mat-error *ngIf="editForm.get('openTo').errors && (editForm.get('openTo').touched)">
          This field is required
        </mat-error>
      </mat-form-field>
    </div>

    <button mat-raised-button color="primary" type="button" class="btn btn-success" [disabled]="!editForm.valid"
      (click)="onSubmit()" routerLink="/regulardays">Save</button>
  </form>
</div>

以及我的服务:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from "rxjs/index";

export class RegularDays {
  constructor(
    public id: string,
    public dayOfWeek: string,
    public openFrom: string,
    public openTo: string,
  ) { }
}

@Injectable({
  providedIn: 'root'
})
export class RegularDaysService {

  constructor(
    private http: HttpClient
  ) { }

  baseUrl: string = 'http://localhost:8080/hm/rest/regulardays/';   //local

  getRegularDays() {

    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    return this.http.get<RegularDays[]>(this.baseUrl + '', { headers });
  }

  getRegularDaysById(id: number): Observable<RegularDays> {
    return this.http.get<RegularDays>(`${this.baseUrl}${id}`);
  }

  public updateRegularDays(regularDay: RegularDays): Observable<RegularDays> {
    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
    return this.http.put<RegularDays>(`${this.baseUrl}${regularDay.id}`, regularDay, { headers });
  }
}
angular page-refresh
1个回答
0
投票

有了这些信息,您已经给出了我想建议您在数据库更新后检查导航是否发生。你可以答应你。

© www.soinside.com 2019 - 2024. All rights reserved.