0
私は2つのサーバー、1つはnodejs、もう1つはgulp-webserverを使用しています。node.js - クロスオリジンアクセスでデータを受信していません
node.jsサーバーはusers.jsonファイルを使用して表示します。
var express = require("express");
var app = express();
var bodyParser = require("body-parser");
var router = express.Router();
var cors = require('cors')
var fs = require("fs");
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({"extended" : false}));
app.get('/listUsers', function (req, res) {
fs.readFile(__dirname + "/" + "users.json", 'utf8', function (err, data) {
console.log(data);
res.end(data);
});
})
var server = app.listen(8081, function() {
var host = server.address().address
var port = server.address().port
console.log("Example app listening at http://%s:%s", host, port)
})
user.json：
{
"user1" : {
"name" : "mahesh",
"password" : "password1",
"profession" : "teacher",
"id": 1
},
"user2" : {
"name" : "suresh",
"password" : "password2",
"profession" : "librarian",
"id": 2
},
"user3" : {
"name" : "ramesh",
"password" : "password3",
"profession" : "clerk",
"id": 3
}
}
今私はgetメソッドを使用してそのデータを呼び出すと、変数にそれを保存し、primeng-データテーブルを使用して、それを表示したいです。私は私のdatacomponent内でこの1つのOnInitを呼んでいる
import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import { Data } from './data';
import 'rxjs/add/operator/toPromise';
@Injectable()
export class DataService {
constructor(private http : Http) {
}
getData(){
return this.http.get('http://localhost:8081/listUsers')
.toPromise()
.then(res => <Data[]> res.json().data)
.then(data => { return data; });
;}
}
：
import { Component } from '@angular/core';
import { Data } from './data';
import {DataTable} from 'primeng/primeng';
import {Column} from 'primeng/primeng';
import { Headers, Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { DataService } from './data.service'
@Component({
selector: 'my-datatbl',
templateUrl: 'dist/data.component.html',
directives: [DataTable, Column],
providers: [DataService]
})
export class DataComponent {
datatbl: Data[];
constructor(private dataservice : DataService) {
}
ngOnInit(){
this.dataservice.getData().then(datatbl => this.datatbl = datatbl)
console.log(this.datatbl)
consolelogが未定義示し
は、したがって、私はdata.serviceを持っています。私はwhtaが間違っているとは知らないが、私は絶対的なnewbeだから、私の最初の質問は： これも可能ですか？
これはテスト目的のためのものです。これはREST APIになっているためです。私はこの段階でmongodbや他のデータベースサービスを使いたいとは思わないが、もしこれが唯一の方法なら、私はそれをやるかもしれない。