Solucionado (ver solução)
Solucionado
(ver solução)
9
respostas

Router com Angular após delete

Eu preciso redirecionar a minha pagina pra product após fazer o delete, porém com o meu código ele até redireciona mas a tela do navegador fica escura como se estivesse em debug e não atualiza os dados. Eu quero que seja redirecionado e apareca com os dados atualizados. Segue os codigos:

Service:

private headers = new HttpHeaders ({ 'Content-Type': 'application/jason' });

deleteProduct(id){    
    const url = `${"http://localhost:8080/api/products"}/${id}`;

    this.http.delete(url, {headers: this.headers, withCredentials: true}).toPromise();
    console.log("Produto excluido");
  }

o meu component está assim:

delete(){
    this.productService.deleteProduct(this.id);
    this.router.navigate(['product']);
  }

Lembrando que está conseguindo excluir, só nao está redirecionando.

Obrigado.

9 respostas

Após vc fazer o redirecionamento vc executa alguma coisa e mandar buscar os dados atualizado ?

Deixa eu ver o codigo da tela de produtos

O meu component

@Component({
    selector: 'app-product',
    templateUrl: './product.component.html',
    styleUrls: ['./product.component.scss'],
    animations: [routerTransition()]
})
export class ProductComponent implements OnInit, OnDestroy {
    public selectedName: string = "";
    products: any[];
    dataTable: any;

    constructor(private http: HttpClient, private chRef: ChangeDetectorRef) { }

    ngOnInit(): void {
      this.http.get<any[]>("http://localhost:8080/api/products", {withCredentials: true})
        .subscribe(
          value => {
            console.log("Received product list: ", value)
            this.products = value['content'];
            this.chRef.detectChanges(); // waits for Angular to write the HTML
            this.initDatatable();
          },
          error => console.log("Request error: ", error);
        );
    }

    public selectRow(index: number, row:any) {
        this.selectedName = "row#" + index + " " + row.name
    }
}

aparente tudo normal, não sei te dizer então oque acontece.

da alguma mensagem no console do navegador ?

Apenas mostra que foi excluido com sucesso e volta pra pagina de product.

Porém desatualizada, o item deletado ainda aparece.

Após voltar para a pagina de produtos vc faz a busca pra atualizar a sua listagem de produtos ?

e outra coisa apos excluir ve se ainda existe no seu banco de dados.

Verifiquei no banco e o item é excluido sim,

porem a busca que você mencionou eu acho que não foi feito, como seria isso?

Pra fazer um delete o ideal é usar o subscribe ou toPromise?

solução!

Consegui solucionar, mas acredito que não foi da maneira mais elegante,

na minha função de delete eu coloquei o seguinte código:

    this.router.navigated = true; 
    this.router.navigate([this.router.url]);

e no meu component que quero atualizar coloquei mais esses codigos:

constructor(private productService: ProductService,
                private router: Router){
    this.router.routeReuseStrategy.shouldReuseRoute = function(){return false;}

}

Eu utilizo o 'subscribe';

pra carregar sua lista utiliza -> this.http.get<any[]>("http://localhost:8080/api/products" novamente

Sugestao :

bota esse codigo dentro de um metodo 'buscarProdutos'

ngOnInit(): void { this.http.get<any[]>("http://localhost:8080/api/products", {withCredentials: true}) .subscribe( value => { console.log("Received product list: ", value) this.products = value['content']; this.chRef.detectChanges(); // waits for Angular to write the HTML this.initDatatable(); }, error => console.log("Request error: ", error); ); }

ngOnInit(): void { this.buscarProdutos() }

Ae apos vc excluir chama o metodo 'buscarProdutos()'