Angular CLI gab keine Ausgabe

Question

Ich benutze angular cli 1.4.3, Knoten 6.11.3, npm 5.4.2, ich versuche, die Datensätze von Rest API zu lesen, aber es gab keine Ausgabe bei localhost. Es ist kein Fehler in der Ausgabe der Entwicklerkonsole aufgetreten. Unten ist der Code und Screenshot:

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

schreib 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 
){} 
} 

Danke.

Answer 1

Ich habe herausgefunden, wie dieses Problem zu lösen, müssen HTTP-Modul importieren

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

Answer 2

Diese einfache HTTP-GET-Anfrage wird Ihnen helfen

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); 
    } 

ausgegeben:

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