如何使用node.js从angular 7应用程序中的mysql数据库中获取数据，并将其显示在angular组件html页面上

我已经尝试了每一件事，但我无法理解如何达到我的目标。 现在我的主要目标是从mysql数据库中获取数据，然后在angular组件（page-one.component.ts文件）中访问这些信息。现在我可以连接到数据库，并可以从server.js文件中的数据库获取数据。但是我不知道如何得到角分量的信息。到目前为止，我尝试的方法是在angular.json文件中包含server.js文件，然后在page-one.component.ts文件中包含函数“get_data”（get_data function fetch data from database in server.js file），然后调用page-one.component.ts文件中的函数。调用了该函数，但问题是我在server.js文件中遇到错误，即“无法读取未定义的属性'createConnection'。此错误阻止我从数据库获取信息。但当我在server.js文件中调用这个get_data函数时，我得到了数据库信息，可以在控制台中打印这些信息。 谁能给我一个解决办法吗。 我认为错误是因为变量的上下文。 但请引导我

我的server.js文件代码

const express = require('express');
const path = require('path');
const http = require('http');
const socketIO = require('socket.io');
const app = express();

const server = http.createServer(app);
const port = process.env.PORT || 3000;


app.use(express.static(path.join(__dirname, 'dist')));
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist/index.html'));

});

var mysql = require('mysql');

var dbconfig = {
    host: "localhost",
    user: "root",
    password: "",
    database: "mydb"
}

var con = mysql.createConnection(dbconfig);
con.connect(function (err) {
    if (err) throw err;
    console.log("Connected!");
});


 get_data();   

 function get_data(){

    console.log("function called");

    var con = this.mysql.createConnection(dbconfig);  ===> GOT ERROR HERE

    con.query("SELECT * FROM teacher", function (err, result, fields) {
        if (err) throw err;
        console.log(result);
    });

}

server.listen(port, () => {

    console.log(`server running on port ${port} `);
})

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';

declare function get_data(): any; 
@Component({
  selector: 'app-page-one',
  templateUrl: './page-one.component.html',
  styleUrls: ['./page-one.component.css']
})
export class PageOneComponent implements OnInit {

  constructor(private http: Http) { }

  ngOnInit() {
    get_data();
  }

}

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myapp": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/myapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": 
            [
              "server.js" ===> INCULDED THE SERVER.JS FILe HERE
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "myapp:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "myapp:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "myapp:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "myapp-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "myapp:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "myapp:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "myapp"
}

我的page-one.component.ts文件代码

const express = require('express');
const path = require('path');
const http = require('http');
const socketIO = require('socket.io');
const app = express();

const server = http.createServer(app);
const port = process.env.PORT || 3000;


app.use(express.static(path.join(__dirname, 'dist')));
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist/index.html'));

});

var mysql = require('mysql');

var dbconfig = {
    host: "localhost",
    user: "root",
    password: "",
    database: "mydb"
}

var con = mysql.createConnection(dbconfig);
con.connect(function (err) {
    if (err) throw err;
    console.log("Connected!");
});


 get_data();   

 function get_data(){

    console.log("function called");

    var con = this.mysql.createConnection(dbconfig);  ===> GOT ERROR HERE

    con.query("SELECT * FROM teacher", function (err, result, fields) {
        if (err) throw err;
        console.log(result);
    });

}

server.listen(port, () => {

    console.log(`server running on port ${port} `);
})

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';

declare function get_data(): any; 
@Component({
  selector: 'app-page-one',
  templateUrl: './page-one.component.html',
  styleUrls: ['./page-one.component.css']
})
export class PageOneComponent implements OnInit {

  constructor(private http: Http) { }

  ngOnInit() {
    get_data();
  }

}

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myapp": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/myapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": 
            [
              "server.js" ===> INCULDED THE SERVER.JS FILe HERE
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "myapp:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "myapp:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "myapp:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "myapp-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "myapp:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "myapp:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "myapp"
}

我的angular.json文件代码

const express = require('express');
const path = require('path');
const http = require('http');
const socketIO = require('socket.io');
const app = express();

const server = http.createServer(app);
const port = process.env.PORT || 3000;


app.use(express.static(path.join(__dirname, 'dist')));
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist/index.html'));

});

var mysql = require('mysql');

var dbconfig = {
    host: "localhost",
    user: "root",
    password: "",
    database: "mydb"
}

var con = mysql.createConnection(dbconfig);
con.connect(function (err) {
    if (err) throw err;
    console.log("Connected!");
});


 get_data();   

 function get_data(){

    console.log("function called");

    var con = this.mysql.createConnection(dbconfig);  ===> GOT ERROR HERE

    con.query("SELECT * FROM teacher", function (err, result, fields) {
        if (err) throw err;
        console.log(result);
    });

}

server.listen(port, () => {

    console.log(`server running on port ${port} `);
})

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';

declare function get_data(): any; 
@Component({
  selector: 'app-page-one',
  templateUrl: './page-one.component.html',
  styleUrls: ['./page-one.component.css']
})
export class PageOneComponent implements OnInit {

  constructor(private http: Http) { }

  ngOnInit() {
    get_data();
  }

}

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myapp": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/myapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": 
            [
              "server.js" ===> INCULDED THE SERVER.JS FILe HERE
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "myapp:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "myapp:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "myapp:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "myapp-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "myapp:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "myapp:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "myapp"
}

无法读取未定义的属性“createConnection”

constmysql=require（'mysql2'）；
const connection=mysql.createPool({
主机：“localhost”，
用户：“”，
密码：“”，
数据库：“”，
连接限制：10，
队列限制：0
});
连接。承诺（（错误）=>{
如果（错误）抛出错误；
console.log（'connected！'）；
});
module.exports=connection.promise（）
app.get（“/youroute）”，（请求、恢复、下一步）=>{
“严格使用”；
const getProduct=“从表中选择*”；
database.query（getProduct，（err，行，字段）=>{
如果（错误）{
res.status（500）.send（{error:'Something failed！'}）
};
res.status（200）.json({
消息：“”，
产品：行，
});
});
});
角度传感器的服务
导出你的接口{
身份证号码：，
标题：字符串，
内容：字符串
}
模型角度的获取方法
getData（）{
this.http.get（“URL”）
.订阅（结果=>{
控制台日志（结果）；
});
在HTML make For Loop中，使用NGFOR显示您的数据
我希望我能帮助您，而这段代码片段可能会解决这个问题，真正有助于提高您文章的质量。请记住，您是在为将来的读者回答这个问题，而那些人可能不知道您代码建议的原因。您好，欢迎访问StackOverflow！你读过了吗？这会帮助你避免被否决。