Angular2 API呼び出しは何も返しません

Question

私の問題は、HTML形式で表示されないことです。これをどうすれば解決できますか？ クエリは正常です。結果はURLで取得できますが、component.htmlには表示できません。 （それが動作し、それは私にJSONコンテンツを表示するので、私はURL/API/mainstorageを呼び出す場合、私は参照してください。）

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

文書.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で何かを見ることができません、あなたはサービスが戻ってそれを返す前にそれを表示しようとしています。 そこdocumentsをしているし、サービスからのデータが受信されると、それが表示されますかどうかをチェックします*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であなたの変数をラップすることにより、この問題を解決することができます。