Angular2 API调用没有任何返回

我的问题是，它不是以html的forms显示。 我该如何解决这个问题？ 查询是好的，我得到的结果在URL上，但不能显示在component.html。 （它工作，我看我是否调用URL / api / mainstorage，所以它显示我的JSON内容。）

Index.js

var express = require('express'); var router = express.Router(); // http://localhost:3000/ router.get('/', function(req, res, next) { res.status(200) .json({ status: 'success', message: 'Live long and prosper!' }); }); var db = require('./queries'); router.get('/api/mainstorage', db.getAllDocuments); module.exports = router; 

Queries.js

 var promise = require('bluebird'); var options = { // Initialization Options promiseLib: promise }; var pgp = require('pg-promise')(options); var connectionString ='postgres://dbuser:Storage@localhost/mainstorage' var db = pgp(connectionString); const axios = require('axios'); const API = 'http://localhost:3000'; function getAllDocuments(req, res, next) { axios.get(`${API}/main`) db.any('SELECT * FROM files') .then(function (data) { res.status(200) .json({ status: 'success', data: data, message: 'Retrieved all files' }); }) .then(documents => { res.send(200).json(); }) .catch(function (err) { return next(err); }); } module.exports = { getAllDocuments: getAllDocuments }; 

documents.component.ts

 export class DocumentsComponent implements OnInit { title = 'app works!'; mainstorage; documents: any []; constructor(private documentsService: DocumentsService) { } ngOnInit() { // Retrieve documents from the API this.documentsService.getAllDocuments().subscribe(documents => { this.documents = documents; }); } } 

documents.service.ts

 @Injectable() export class DocumentsService { constructor(private http: Http) {} getAllDocuments(){ return this.http.get('/api/mainstorage') .map(res => res.json()); } } 

documents.component.html

 <div class="row" *ngFor="let document of documents"> <div class="card card-block"> <h4 class="card-title">{{ documents.id }}</h4> <p class="card-text">{{document.country}}</p> 

Answer 1

您无法在HTML中看到任何内容，因为服务数据是asynchronous的，您正试图在服务返回之前显示它。 你可以通过在ngIf包装你的variables来解决这个ngIf

 <div *ngIf='documnets'> <div class="row" *ngFor="let document of documents"> <div class="card card-block"> <h4 class="card-title">{{ documents.id }}</h4> <p class="card-text">{{document.country}}</p> </div> </div> </div> 

ngIf如果将检查documents === true并且一旦收到来自服务的数据，就会显示div中的内容。