I have a CRUD on angle 6 that connects to node and mysql. When I access the homepage the getQuotes () function loads all the data I need. When I access the screen to update a record and perform this update I'm forwarded to the home screen, but the value that appears is still the old one. Only when I press F5 and reloads the page that the updated value is fetched.
How do I get this?
component.ts
import { Component, OnInit } from '@angular/core';
import { Quote } from '../../1-model/quote.model';
import { QuoteService } from '../../quote.service';
import * as $ from 'jquery'
@Component({
selector: 'app-quotes-abertas',
templateUrl: './quotes-abertas.component.html',
styleUrls: ['./quotes-abertas.component.css']
})
export class QuotesAbertasComponent implements OnInit {
public quotes: Quote[];
public daysInLine: Date = new Date();
constructor(private quoteService: QuoteService) { }
ngOnInit() {
$(document).ready(function () {
$("#pesquisar").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#quote-table tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
this.getQuotes()
}
getQuotes() {
return this.quoteService.getQuotes()
.subscribe(
quotes => {
console.log(quotes);
this.quotes = quotes
}
)
}
}
Below is the update code!
import { Component, OnInit } from '@angular/core';
import { QuoteService } from '../../quote.service';
import { ActivatedRoute, Router } from "@angular/router";
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { QuoteValue } from '../../1-model/QuoteValue.model';
@Component({
selector: 'app-quotes-abertas-detalhes',
templateUrl: './quotes-abertas-detalhes.component.html',
styleUrls: ['./quotes-abertas-detalhes.component.css']
})
export class QuotesAbertasDetalhesComponent implements OnInit {
public quoteValue: Observable<QuoteValue>;
public detailsForm: FormGroup;
public quote: QuoteValue
constructor(
private quoteService: QuoteService,
private activatedRoute: ActivatedRoute,
private route: Router,
private formBuilder: FormBuilder
) { }
ngOnInit() {
const id = + this.activatedRoute.snapshot.paramMap.get('id');
this.quoteService.getQuote(id)
.subscribe(
quote => {
this.quote = quote
}
);
this.quoteValue = this.quoteService.getQuote(id)
.pipe(
tap(quoteValue => this.detailsForm.patchValue(quoteValue))
)
this.detailsForm = this.formBuilder.group({
id: [id],
QuoteType: [null],
AccountOwner: [null, Validators.required],
AccountContactName: [null, Validators.required],
AccountContactEmail: [null, [Validators.required, Validators.email]],
AccountContactTel: [null, Validators.required],
AccountNumber: [null, Validators.required],
IdOportunity: [null, Validators.required],
IBX: [null, Validators.required],
ProjectStatus: ['In Progress', Validators.required],
InitialTerm: [0, [Validators.max(60), Validators.min(1)]],
RenewalTerm: [0, [Validators.max(60), Validators.min(1)]],
PriceIncrease: [null],
EffectiveDate: [null],
NonStandardTerm: [null],
FreeMonths: [0],
RampMonths: [0],
RampPerCent: [null],
RampStartDate: [null],
RampEndDate: [null],
})
}
update(): void {
const updateQuote = this.detailsForm.getRawValue() as QuoteValue
this.quoteService.updateQuote(updateQuote).subscribe()
this.goBack()
}
delete(): void {
this.quoteService.deleteQuote(this.quote.id).subscribe();
this.goBack()
}
goBack(): void {
this.route.navigate(['homepage', 'quotes-abertas'])
}
}