Angular2 API调用不返回

Question

我的问题是，它不是以html格式显示。我该如何解决这个问题？ 查询很好，我在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:[email protected]/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 
}; 

文件.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，因为维修数据是异步的，你想的服务使其返回前显示它。 您可以通过包装你的变量*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，一旦接收到来自服务的数据就会显示出来。