Angular CLI没有提供输出

Question

我正在使用angular cli 1.4.3，节点6.11.3，npm 5.4.2，我正在尝试从其他API读取记录，但它没有在localhost提供输出。在开发控制台输出中没有出现错误。以下是代码和屏幕截图：

读products.component.html

<div class="row m-b-18px">
<div class="col-md-12">
    <!-- button to create new product -->
    <a (click)="createProduct()" class='btn btn-primary pull-right'>
        <span class='glyphicon glyphicon-plus'></span> Create Product
    </a>
</div>
</div>

<div class="row">
<div class="col-md-12">

    <!-- HTML table for our list of product records -->
    <table class='table table-hover table-responsive table-bordered'>

        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Description</th>
            <th>Category</th>
            <th>Actions</th>
        </tr>

        <!-- Use *ngFor directive to loop throught our list of products. -->
        <tr *ngFor="let product of products">
            <td>{{product.name}}</td>
            <td>{{product.price}}</td>
            <td>{{product.description}}</td>
            <td>{{product.category_name}}</td>
            <td>
                <!-- read one product button -->
                <a (click)="readOneProduct(product.id)" class='btn btn-
                primary m-r-5px'>
                    <span class='glyphicon glyphicon-eye-open'></span> Read
                </a>

                <!-- edit product button -->
                <a (click)="updateProduct(product.id)" class='btn btn-info 
                m-r-5px'>
                    <span class='glyphicon glyphicon-edit'></span> Edit
                </a>

                <!-- delete product button -->
                <a (click)="deleteProduct(product.id)" class='btn btn-danger 
                m-r-5px'>
                    <span class='glyphicon glyphicon-remove'></span> Delete
                </a>
            </td>
        </tr>
    </table>
</div>
</div>

读products.component.ts

import { Component, OnInit, Input, Output, EventEmitter } from 
'@angular/core';
import { ProductService } from '../product.service';
import { Observable } from 'rxjs/Observable';
import { Product } from '../product';

@Component({
   selector: 'app-read-products',
   templateUrl: './read-products.component.html',
   styleUrls: ['./read-products.component.css'],
   providers: [ProductService]
})

export class ReadProductsComponent implements OnInit {

// store list of products
products: Product[];

// initialize productService to retrieve list products in the ngOnInit()
constructor(private productService: ProductService){}

// methods that we will use later
createProduct(){}
readOneProduct(id){}
updateProduct(id){}
deleteProduct(id){}

// Read products from API.
ngOnInit(){
    this.productService.readProducts()
        .subscribe(products =>
            this.products=products['records']
        );
}
}

app.component.html

<!-- container -->
<div class="container">

<!-- show page header -->
<div class="row">
    <div class="col-md-12">
        <div class='page-header'><h1>{{title}}</h1></div>
    </div>
</div>

<!-- Show this view if "show_read_products_html" property of AppComponent is 
true. -->
<app-read-products
    *ngIf="show_read_products_html">
</app-read-products>

</div>
<!-- /container -->

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
// properties for child components
title="Read Products";

// properties used to identify what views to show
show_read_products_html=true;
}

product.service.ts

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Product } from './product';

@Injectable()

// Service for products data.
export class ProductService {

// We need Http to talk to a remote server.
constructor(private _http : Http){ }

// Get list of products from remote server.
readProducts(): Observable<Product[]>{
    return this._http
        .get("http://localhost/Rest%20API/product/read.php")
        .map(res => res.json());
   }

}

product.ts

// Product class to define this object's properties.
export class Product {
constructor(
    public id: number,
    public name: string,
    public price: number,
    public description: string,
    public category_id: number,
    public category_name: string
){}
}

谢谢。

Answer 1

这个简单的http get请求可以帮助您

constructor(private http: Http) { }

getIp(): Promise<Hero[]> {
     return this.http.get("http://ipinfo.io")
         .toPromise()
         .then(response => {
                console.log(response);
         })
         .catch(this.handleError);
 }

 private handleError(error: any): Promise<any> {
      console.error('An error occurred', error); 
      return Promise.reject(error.message || error);
  }

输出将是：

{
    "ip": "xxx.xx.xxx.xxx",
    "city": "Chennai",
    "region": "Tamil Nadu",
    "country": "IN",
    "loc": "17.0833,84.2833",
    "org": "AS4755 TATA COMM MAINTAINER"
}

Answer 2

我弄清楚如何解决这个问题，需要导入http模块

import { HttpModule } from '@angular/http';
@NgModule({
declarations: [ AppComponent, ReadProductsComponent ],
imports: [ BrowserModule, HttpModule ],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }