Look at the image
Theuserwilltypeinthetitlefieldtosearchthetable,butanerrorappearsinthebrowserconsole
TheerrormessagestatesthattheproblemisinthesearchmethodintheHTMLfile,righthere;
<formautocomplete="off" (ngSubmit)="pesquisar()">
The complete code is here;
<div class="centro">
<div class="ui-g">
<form autocomplete="off" (ngSubmit)="pesquisar()">
<div class="ui-g-12 ui-fluid">
<label>Título</label>
<input pInputText type="text" name="titulo"
[(ngModel)]="titulo">
</div>
<div class="ui-g-12">
<label style="display: block">Fonte</label>
<input pInputText type="text" style="width: 200px" name="font"
>
</div>
<div class="ui-g-12">
<button pButton type="submit" label="Pesquisar"></button>
</div>
</form>
</div>
<div class="ui-g">
<div class="ui-g-12">
<p-dataTable [value]="noticias" [paginator]="true" [rows]="5"
[responsive]="true">
<p-column field="dataNoticia" header="Data da noticia" styleClass="col-data">
<ng-template let-lanc="rowData" pTemplate="body">
<span>{{ lanc.dataNoticia | date:'dd/MM/yyyy' }}</span>
</ng-template>
</p-column>
<p-column field="titulo" header="Titulo"></p-column>
<p-column field="font" header="Fonte" styleClass="col-valor"></p-column>
<p-column styleClass="col-acoes">
<ng-template let-lanc="rowData" pTemplate="body">
<button pButton icon="fa-angle-double-right"
pTooltip="Visualize" tooltipPosition="top"
></button>
</ng-template>
</p-column>
</p-dataTable>
</div>
</div>
</div>
I need to fix the problem, I think it may be in the component or the service.
Component
titulo: string;
noticias = [];
constructor(private noticiaService: NoticiaService) { }
ngOnInit() {
this.pesquisa();
}
pesquisa() {
this.noticiaService.pesquisar({ titulo: this.titulo })
.subscribe(noticias => this.noticias = noticias);
}
Service
import { Noticia } from './../core/model';
import { Http, URLSearchParams } from '@angular/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
export interface NoticiaFiltro {
titulo: string;
}
@Injectable()
export class NoticiaService {
noticiasUrl = 'http://localhost:8080/noticias';
constructor(private http: Http) { }
pesquisar(filtro: NoticiaFiltro): Observable <Noticia[]> {
const params = new URLSearchParams();
if (filtro.titulo) {
params.set('titulo', filtro.titulo);
}
return this.http.get('${this.noticiasUrl}', {search: params})
.map( response => response.json().content);
}
}