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

Question

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

前提・実現したいこと

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を参考にしています。

{
  "name": "test-mysql",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.2.0",
    "@angular/common": "~10.2.0",
    "@angular/compiler": "~10.2.0",
    "@angular/core": "~10.2.0",
    "@angular/forms": "~10.2.0",
    "@angular/platform-browser": "~10.2.0",
    "@angular/platform-browser-dynamic": "~10.2.0",
    "@angular/router": "~10.2.0",
    "@types/mysql": "^2.15.15",
    "mysql2": "^2.2.5",
    "promise-mysql": "^4.1.3",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1002.0",
    "@angular/cli": "~10.2.0",
    "@angular/compiler-cli": "~10.2.0",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.19.4",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  },
  "browser": {
    "crypto": false,
    "http": false,
    "https": false,
    "net": false,
    "path": false,
    "stream": false,
    "tls": false,
    "fs": false,
    "timers": false
  }
}

Comments

[退会済みユーザー]

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

[kazumasaxx]

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

[退会済みユーザー]

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

[kazumasaxx]

遅くなり申し訳ございません。
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);
});

[退会済みユーザー]

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

[kazumasaxx]

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