difficulty to list data in angular 4 datatable

Question

As the title says, I cannot load the database records into the Primeng datatable.

No error messages appear on the Visualcode console, no error messages appear on the internet browser console, no error notifications appear on the code itself.

I think the problem should be in HTML, I need help to know how to solve this, this is my code.

Service code;

import { Noticia } from './../core/model';

import { Http, Headers } from '@angular/http';
import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Observable';

import 'rxjs/add/operator/map';



@Injectable()
export class NoticiaService {

  noticiasUrl = 'http://localhost:8080/noticias';


  constructor(private http: Http) { }

  pesquisar(): Observable <Noticia[]> {
    return this.http.get(`${this.noticiasUrl}`)
      .map(response => response.json().content);

  }


}

Component code;

noticias = [];

  constructor(private noticiaService: NoticiaService) { }

  ngOnInit() {
     this.pesquisa();
  }


  pesquisa() {
      this.noticiaService.pesquisar()
      .subscribe(noticias => this.noticias = this.noticias);
  }

HTML code;

<div class="container">
  <div class="ui-g">



    <div class="ui-g-12 ui-fluid">
      <label>Descrição</label>
      <input pInputText type="text">
    </div>

    <div class="ui-g-12">
      <label style="display: block">Vencimento</label>
      <input pInputText type="text" style="width: 95px">

      <label>até</label>
      <input pInputText type="text" style="width: 95px">
    </div>

    <div class="ui-g-12">
      <button pButton type="submit" label="Pesquisar"></button>
    </div>

  </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>

Answer 1

  ngOnInit() {
     this.pesquisa();
  }

//O erro estava que tinha um this extra aqui
  pesquisa() {
      this.noticiaService.pesquisar()
      .subscribe(noticias => this.noticias = noticias);
  }