Ôpa, beleza Givanildo!
Não sei se é o caso para este curso que está participando, mas vai aqui como eu faria para chamar o backend somente após o usuário finalizar a digitação utilizando debounceTime, sendo que o debounceTime precisaremos estipular um tempo para que após ser digitado a segunda alteração será disparado a chamada quando o tempo for finalizado, então vamos lá.
Primeira coisa, no template irei substituir o ngModelChange por keyup, passando o valor no evento ocorrido:
(keyup)="atualizarCarrinho($event.target.value)"
Segundo no component criaria duas variáveis:
carrinhoChange = new Subject<string>();
subscription: Subscription;
carrinhoChange será um Subject do tipo string, para que possamos controlar as entradas e a chamada no back com RxJS.subscription por que precisaremos guardar a referência da inscrição qeu faremos e no final do processo desescrever.
Terceiro no método atualizarCarrinho ficaria desta forma:
atualizarCarrinho(event): void {
this.carrinhoChange.next(event.target.value);
this.subscription = this.carrinhoChange
.pipe(debounceTime(500))
.subscribe((carrinho: string) => {
this.carrinhoService.update(carrinho).subscribe(() => {
this.carrinhoService.showMessage('Carrinho Atualizado');
});
this.subscription.unsubscribe();
});
}
Primeiro pegamos o valor vindo do input e passamos através do next para atualizar o carrinhoChange;
Em seguida dentro do pipe utilizamos o debounceTime com o tempo de 500 milesegundos, quando o usuário deixar de digitar será respeitado o tempo definido e então o subscribe será disparado, o carrinhoService será chamado passando o ultimo valor do carrinhoChange, no final é só dar um unsubscribe para desescrever.
Espero ter ajudado e esclarecido.
