My HTTP(GET) request is not running on ngOnInit() - Angular 6

Asked

Viewed 104 times

0

I have a CRUD at Angular 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 am forwarded to the home screen, but the value that appears is still the old. Only when I press F5 and reload the page that the updated value is searched.

How do I fix it?

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 follows 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'])
  }
}
  • this.activatedRoute.snapshot.params['id']; tried it like this?

  • The problem is after I do the update and I am redirected to the home screen. There the value I modified was not changed and only after I give a F5 the new value is reloaded. I think there’s something wrong with my ngOnInit request from the home screen

  • so I think you’re missing these values on your home screen... on the ngint or constructor

  • by what you say he’s searching for the url... then when you direct to it he n has a Return command at the new value he was fed

  • And how do I fix this, bro? When I click update... a modal arises and asks if I really want to make that change. If I press confirm I am redirected to the home screen. I am using this.route.navigate([''])

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.