angular - 如何显示来自带有 Electron 5和angular8的sqlite3的数据

Question

我是electron5和angular8的新手。
我已经从sqlite3检索了数据，但是我无法理解如何将这些数据发送到我的棱 Angular 部分并进行显示。

我曾尝试过使用可观察性，但是对于它们来说是新手，所以我不确定我做对了吗。我还尝试了各种异步代码，管道， map ，类型更改等...我发现了，但无济于事。

这是我的electron.service文件，该文件从sqlite3 db(console.log工作)中检索数据，并带有一些注释的测试代码:

Read() {
    //var db = new sqlite3.Database("./dosimetre.sqlite");
    let db = new this.sqlite3.Database(
      "./dosimetre.sqlite",
      this.sqlite3.OPEN_READWRITE,
      err => {
        if (err) {
          console.error(err.message);
        } else {
          console.log("Connected to the dosi database.");
        }
      }
    );
    let data = [];
    let sql = "SELECT code FROM INDIVIDU LIMIT 0,5";
    //let sql = "SELECT * FROM sqlite_master WHERE type='table'";
    db.each(sql, (err, row) => {
      if (err) {
        console.error(err.message);
      }
      data.push(row);
    });
    db.close(err => {
      if (err) {
        console.error(err.message);
      }
      console.log("Close the database connection.");
    });
    return Observable.create(observer => {
      observer.next(data);
    });
    //return data;
  }
}

我的home.component.ts，显示了“this.list”，但没有显示“this.rows $”

import { Component, OnInit } from "@angular/core";
import { ElectronService } from "../../providers/electron.service";

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html",
  styleUrls: ["./home.component.scss"]
})
export class HomeComponent implements OnInit {
  constructor(private ElecServ: ElectronService) {}
  rows$ = [];
  list = [];

  ngOnInit() {
    this.list = [{age: 32,},{age: 25,},{age: 32,}];
    //this.rows = this.ElecServ.Read();
    this.ElecServ.Read().subscribe(x => {
      this.rows$ = x;
    });
    //this.ElecServ.Read();
    console.log("test2", this.rows$);
    //console.log("test", this.list);
    //console.log("data test", this.ElecServ.Read());
  }
  //ngDoCheck(){}
}

我的home.component.html显示列表，但不显示行$

<div style="text-align:center">
  <h1>
    List of users
  </h1>
  <ul *ngIf="list">
    <li *ngFor="let array of list">{{ array.age }}</li>
  </ul>
  <ul *ngIf="ElecServ.rows$ | async as rowing">
    <li *ngFor="let array2 of rowing.rows$">{{ array2.code }}</li>
  </ul>
</div>

我期望有5个“代码”的列表。

Answer 1

我认为sqlite 3查询是异步的。

您将空数据发送到您的 View 。

我建议您将apro/promise与async/await语法一起使用，如下所示:

Read() {

return new
Promise(resolve
=> {

let data = [];

//var db = new sqlite3.Database("./dosimetre.sqlite");

let db =
new this.sqlite3.Database(

"./dosimetre.sqlite",

this.sqlite3.OPEN_READWRITE,

err => {

if (err) {

console.error(err.message);

} else {

console.log("Connected to the dosi database.");

}

}

);



let sql =
"SELECT code, id, nom FROM INDIVIDU LIMIT 0,5";

//let sql = "SELECT * FROM sqlite_master WHERE type='table'";



db.each(sql, (err,
row) => {

if (err) {

console.error(err.message);

}

data.push(row);

});



db.close(err
=> {

if (err) {

console.error(err.message);

}

console.log("Close the database connection.");
// Resolve your promise here
resolve(data);

});

});