TypeScriptを使ったMySQLからのデータ取得

よろしくお願いいたします。

前提・実現したいこと

mysqlのデータをWEB画面に表示したい(TypeScriptを使ってやりたい)

発生している問題・エラーメッセージ

MySQLへのconnectionを実行するとWEB画面が真っ白になる

エラーメッセージは出ていません。

該当のソースコード

test.component.ts
import { Component, OnInit } from '@angular/core';
import * as sqlqery from './sql';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  message: string;
  Datas: MySQLData[];

  constructor() {
    this.message = 'This is a sample of Angular application.';
    this.Datas = [];
    let mycon = sqlqery.connection();
    this.message = mycon.messagestatus;
    mycon.connect();
    mycon.query('SELECT * from new_table LIMIT 2;', (err, rows, fields) => {
      if (err) throw err;
      
      //固定データが表示されるようにテスト用
      var tmp = new MySQLData();
      tmp.id = 12;
      tmp.LabelName = 'rows1';
      tmp.OffsetAddress = 7777;
      this.Datas.push(tmp);
    });

    mycon.end();
  }

  ngOnInit(): void {
    this.Datas = this.getData();
  }
  getData(): MySQLData[] {
    return this.Datas;
  }
}
export class MySQLData {
  id: number;
  LabelName: string;
  OffsetAddress: number;
}

sql.ts
let messagestatus: string;
export function connection() {
    const mysql = require('mysql');
    const connection = mysql.createConnection({
        host: '192.17.200.20',
        user: 'root',
        password: 'pass',
        database: 'Data',
        multipleStatements: true
    });
    console.log("Connect!!");
    messagestatus = "Connect!!";
    return connection;
}

let mycon = connection();
mycon.connect();
mycon.query('SELECT * from new_table LIMIT 2;', (err, rows, fields) => {
    if (err) throw err;

    console.log(rows);
});

mycon.end();

試したこと

【単体でDBからデータを取得】
コマンドで下記を実行
tsc src/app/test/sql.ts
node src/app/test/sql.js

コンソール上でデータが取得できることを確認

しかし、下記のコマンドでブラウザで見ようとすると見れない
ng serve --host 0.0.0.0 --port 8000

補足情報（FW/ツールのバージョンなど）

Anglularのプロジェクトの作り方などは、http://www.tohoho-web.com/ex/angular.html#edit-html-cssを参考にしています。

packagejson
1{
2  "name": "test-mysql",
3  "version": "0.0.0",
4  "scripts": {
5    "ng": "ng",
6    "start": "ng serve",
7    "build": "ng build",
8    "test": "ng test",
9    "lint": "ng lint",
10    "e2e": "ng e2e"
11  },
12  "private": true,
13  "dependencies": {
14    "@angular/animations": "~10.2.0",
15    "@angular/common": "~10.2.0",
16    "@angular/compiler": "~10.2.0",
17    "@angular/core": "~10.2.0",
18    "@angular/forms": "~10.2.0",
19    "@angular/platform-browser": "~10.2.0",
20    "@angular/platform-browser-dynamic": "~10.2.0",
21    "@angular/router": "~10.2.0",
22    "@types/mysql": "^2.15.15",
23    "mysql2": "^2.2.5",
24    "promise-mysql": "^4.1.3",
25    "rxjs": "~6.6.0",
26    "tslib": "^2.0.0",
27    "zone.js": "~0.10.2"
28  },
29  "devDependencies": {
30    "@angular-devkit/build-angular": "~0.1002.0",
31    "@angular/cli": "~10.2.0",
32    "@angular/compiler-cli": "~10.2.0",
33    "@types/jasmine": "~3.5.0",
34    "@types/jasminewd2": "~2.0.3",
35    "@types/node": "^12.19.4",
36    "codelyzer": "^6.0.0",
37    "jasmine-core": "~3.6.0",
38    "jasmine-spec-reporter": "~5.0.0",
39    "karma": "~5.0.0",
40    "karma-chrome-launcher": "~3.1.0",
41    "karma-coverage-istanbul-reporter": "~3.0.2",
42    "karma-jasmine": "~4.0.0",
43    "karma-jasmine-html-reporter": "^1.5.0",
44    "protractor": "~7.0.0",
45    "ts-node": "~8.3.0",
46    "tslint": "~6.1.0",
47    "typescript": "~4.0.2"
48  },
49  "browser": {
50    "crypto": false,
51    "http": false,
52    "https": false,
53    "net": false,
54    "path": false,
55    "stream": false,
56    "tls": false,
57    "fs": false,
58    "timers": false
59  }
60}

退会済みユーザー

2020/11/11 01:52

そもそもブラウザからMySQLには接続出来ないと思うのですが https://teratail.com/questions/140583

kazumasaxx

2020/11/12 06:29

勉強不足ですみません。 DBからのデータは、restapiを用意して取得するという認識で合っていますか？

退会済みユーザー

2020/11/12 07:58 編集

DBと実際に通信を行うWebサーバを用意して何らかのWebAPIを公開し、ブラウザからはWebAPI経由でDBとやり取りすることになると思います。

kazumasaxx

2020/11/16 00:18

遅くなり申し訳ございません。 APIを作成して、JSON形式で値が返ってきている状態にできました。しかし、typescript上ではデータが取得できない？状態になっております。どこが間違っているか教えていただけますでしょうか。以下、test.component.ts constructor( private http: HttpClient ) { this.message = 'This is a sample of Angular application.'; this.Datas = []; let results = this.http.get<MySQLData[]>(`${this.url}/api/free?sql=select * from new_table `) .pipe( catchError(this.handleError('getfree', [])) ); results.forEach(element => { var tmp = new MySQLData(); tmp.id = element[0].OffsetAddress; this.Datas.push(tmp); });

退会済みユーザー

2020/11/16 00:50

コードは読んでいませんが、TypeScript api クライアントあたりでググれば幸せになるのではないでしょうか。

kazumasaxx

2020/11/16 01:17

目的は、this.Datasの中に下のようなデータを入れたいです。 var tmp = new MySQLData(); tmp.id = 11; tmp.LabelName = 'rows'; tmp.OffsetAddress = 1110; this.Datas.push(tmp);