Olá, eu estou com uma dificuldade em encontrar a solução do meu problema sendo assim estou aqui, estou tentando criar um campo de pesquisa ná minha página, ele não está fazendo a pesquisa, porém não está me retornando nenhum erro no build nem no console, então estou perdido se me esqueci de algum passo ou import de algum modulo, não sei, me ajudem porfavor, segue o código:
servicos.service.ts
import {HttpClient, HttpParams} from '@angular/common/http';
import {Injectable} from '@angular/core';
import {Observable} from 'rxjs';
import {Servico} from './servico/servico.model';
import {AUTONOMOUS_API} from '../app.api';
@Injectable()
export class ServicosService {
constructor(private http: HttpClient) {}
servicos(search?: string): Observable<Servico[]> {
let params: HttpParams;
if (search) {
params = new HttpParams().append('q', search);
}
return this.http.get<Servico[]>(`${AUTONOMOUS_API}/autonomos/`, {params: params});
}
servicosById(id: string): Observable<Servico> {
return this.http.get<Servico>(`${AUTONOMOUS_API}/autonomos/${id}/`);
}
}
servicos.component.html
<div class="container">
<div class="header-content" align="center">
<h1>Catálogo de Serviços</h1>
<br>
<mdc-form-field [formGroup]="searchForm" fluid class="form">
<mdc-text-field formControlName="searchControl" outlined label="Pesquisar" [mdcElevation]="3">
<mdc-icon mdcTextFieldIcon leading>search</mdc-icon>
</mdc-text-field>
</mdc-form-field>
</div>
<div class="row">
<div *ngFor="let servico of servicos" class="col-sm-4 col-xs-12">
<app-servico [servico]="servico"></app-servico>
</div>
</div>
</div>
servicos.component.ts
import { Component, OnInit } from '@angular/core';
import {Servico} from './servico/servico.model';
import {ServicosService} from './servicos.service';
import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
import {catchError, debounceTime, distinctUntilChanged, switchMap} from 'rxjs/operators';
import {from} from 'rxjs';
@Component({
selector: 'app-servicos',
templateUrl: './servicos.component.html',
styleUrls: ['./servicos.component.scss']
})
export class ServicosComponent implements OnInit {
servicos: Servico[];
searchForm: FormGroup;
searchControl: FormControl;
constructor(private servicosService: ServicosService,
private fb: FormBuilder) { }
ngOnInit() {
this.searchControl = this.fb.control('');
this.searchForm = this.fb.group({
searchControl: this.searchControl
});
this.searchControl.valueChanges
.pipe(
debounceTime(500),
distinctUntilChanged(),
switchMap(searchTerm => this.servicosService.servicos(searchTerm)
.pipe(
catchError(error => from([]))
)
)
).subscribe(dados => this.servicos = dados);
this.servicosService.servicos().subscribe(dados => this.servicos = dados);
}
}
app.module.ts
Meu app.module está grande então vou mandar os principais para o ReactiveForms
// DEFAULT
import { NgModule } from '@angular/core';
import {CommonModule, HashLocationStrategy, LocationStrategy} from '@angular/common';
// COMPONENTS
import { AppComponent } from './app.component';
import { DialogLoginComponent } from './dialog-login/dialog-login.component';
import { DialogContateComponent } from './dialog-contate/dialog-contate.component';
// SERVICES
import {ServicosService} from './servicos/servicos.service';
// REACTIVE FORMS
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
. . .
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule
],
providers: [
ServicosService,
{provide: LocationStrategy, useClass: HashLocationStrategy},
],
entryComponents: [
DialogLoginComponent,
DialogContateComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
servicos.component.ts (ATUALIZADO)
import { Component, OnInit } from '@angular/core';
import {Servico} from './servico/servico.model';
import {ServicosService} from './servicos.service';
import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
import {catchError, debounceTime, distinctUntilChanged, switchMap} from 'rxjs/operators';
import {from} from 'rxjs';
@Component({
selector: 'app-servicos',
templateUrl: './servicos.component.html',
styleUrls: ['./servicos.component.scss']
})
export class ServicosComponent implements OnInit {
servicos: Servico[];
searchForm = new FormGroup({
searchControl: new FormControl('')
});
constructor(private servicosService: ServicosService,
private fb: FormBuilder) { }
ngOnInit() {
this.searchForm = this.fb.group({
searchControl: ['']
});
this.searchForm.get('searchControl').valueChanges
.pipe(
debounceTime(500),
distinctUntilChanged(),
switchMap(searchTerm =>
this.servicosService.servicos(searchTerm)
.pipe(
catchError(error => from([]))
)
)
).subscribe(dados => this.servicos = dados);
this.servicosService.servicos().subscribe(dados => this.servicos = dados);
}
}