Angular2 API調用不返回

我的問題是，它不是以html格式顯示。我該如何解決這個問題？查詢很好，我在URL上得到結果，但無法在component.html上顯示。（它的工作原理，我看看我所說的URL/API/mainstorage因此它顯示我的JSON內容。）Angular2 API調用不返回

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>

來源

2017-10-04 hellscreamteam

你可以登錄檢查數據是否出現在服務電話 –

你是無法看到任何東西在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，一旦接收到來自服務的數據就會顯示出來。

來源

2017-10-04 08:44:38 mxr7350

我們也使用你建議的模式。我想知道，'* ngFor =「讓文件| async」文件完成同樣的事情嗎？ – msanford

Angular2 API調用不返回

回答

相關問題