Untitled

import { Component, OnInit } from '@angular/core';
import { ProductoServiceService } from '../producto-service.service';
import "rxjs/add/operator/map";


@Component({
  selector: 'app-listado',
  templateUrl: './listado.component.html',
  styleUrls: ['./listado.component.css']
})
export class ListadoComponent implements OnInit {
  filterargs;
  listado;
  items;

  constructor(private crudProducto:ProductoServiceService) { }

  ngOnInit() {

    this.crudProducto.listar()            //Llamamos a la funcion listar de nuestro servicio
    .map((response) => response.json())   //Mapeamos los datos devueltos por nuestro archivo php
    .subscribe((data) => {
    //  console.log(data);
      this.listado = data;                //Asignamos nuestros datos mapeados a una variable
    });
  }

}

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
</head>

<body>
<h4>LISTADO DE MIS PRODUCTOS</h4>
<table>
  <thead>
    <tr>
      <th>DESCRIPCION</th>
      <th>FECHA</th>
      <th>P. COMPRA</th>
      <th>P. VENTA</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of listado">
      <td >
        {{item.pro_descripcion}}

      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

<?php
  header("Access-Control-Allow-Origin: *");
  header("Content-Type: application/json; charset=UTF-8");

$server = "localhost";
$user = "root";
$pass = "";
$bd = "test";

//Creamos la conexiÃ³n
$conexion = mysqli_connect($server, $user, $pass,$bd)
or die("Ha sucedido un error inexperado en la conexion de la base de datos");

//generamos la consulta
$sql = "SELECT * FROM productos";
mysqli_set_charset($conexion, "utf8"); //formato de datos utf8

if(!$result = mysqli_query($conexion, $sql)) die();

$clientes = array(); //creamos un array

while($row = mysqli_fetch_array($result))
{
    $idproducto=$row['idproducto'];
    $pro_descripcion=$row['pro_descripcion'];
    $pro_unidad=$row['pro_unidad'];
    $pro_marca=$row['pro_marca'];
    $pro_fcompra=$row['pro_fcompra'];
    $pro_pcompra=$row['pro_pcompra'];
    $pro_pventa=$row['pro_pventa'];
    $pro_observaciones=$row['pro_observaciones'];
    $vigencia=$row['vigencia'];

    $clientes[] = array('idproducto'=> $idproducto, 'pro_descripcion'=> $pro_descripcion, 'pro_unidad'=> $pro_unidad, 'pro_marca'=> $pro_marca, 'pro_fcompra'=> $pro_fcompra, 'pro_pcompra'=> $pro_pcompra, 'pro_pventa'=> $pro_pventa, 'pro_observaciones'=> $pro_observaciones, 'pro_vigencia'=> $pro_vigencia);


}

//desconectamos la base de datos
$close = mysqli_close($conexion)
or die("Ha sucedido un error inexperado en la desconexion de la base de datos");


//Creamos el JSON
$json_string = json_encode($clientes);
echo $json_string;
?>