Angular 在 Electron 上 - 使用 Observable 更新 UI

Question

我正在尝试在前端使用 Angular 使用 Electron 开发桌面应用程序。它在后端使用 Node mssql 包来查询数据库，并且应该以某种类似于桌面的方式呈现检索到的数据 UI - 就本主题而言，假设它将被可视化在 table.

目前，在我弄明白之前，应用程序显示如下：

具有文本输入以提供直接 sql 查询，具有发送它的按钮，以及 table 遍历结果集。

组件的模板：

 <input type="text" id="queryInput" margin="5,5,5,5" [placeholder]="placeholder" [(ngModel)]="queryTerm" />
  <button class="button btn-info" (click)="onQuery()" margin="5,5,5,5">
    Execute
  </button>
  <table id="dataTable" margin="5,5,5,5" class="table table-bordered" *ngFor="let item of shipments | async">
    <tr>
      <td>{{item.WMSObjectId}}</td>
      <td>{{item.ShipNr}}</td>
      <td>{{item.SupplyLetterNr}}</td>
      <td>{{item.ArrivPeriodStartDT}}</td>
    </tr>
  </table>

这里是组件class:

export class AppComponent implements OnInit {

  title = 'Curiosity';
  placeholder: string = 'Type query in here';
  queryTerm: string = "";
  queryResult: IShipment[] = [];
  shipments: Observable<IShipment[]> | undefined;

  constructor(private _sqlClientService: SQLClientService) {}

  ngOnInit(): void {
    this.shipments = new Observable<IShipment[]>((observer: Observer<IShipment[]>) => {
      observer.next(this.getQueryResults());
    });
  }

  onQuery(): void {
    this._sqlClientService.sqlQuery(this.queryTerm, (response: IResponseObject) => this.updateResultSet(response));
  }

  updateResultSet(response : IResponseObject) : void{
    this.queryResult = response.recordset;
    console.log(this.queryResult);
  }

  getQueryResults() : IShipment[]{
    return this.queryResult;
  }

}

我努力克服的问题是让 UI 知道有数据要呈现，因此 *ngFor 可以填充 table.

我可以看到数据检索已完成，因为 updateResultSet 正在控制台中显示它，但我不太明白如何将其推送到 UI。

我究竟如何触发 next()？

有一次我使用 setInterval(() => observer.next(this.getQueryResults()),1000); 只是为了测试它，然后它就起作用了，但这当然不是正确的方法。

Answer 1

我会使用 BehaviorSubject 来完成所需的行为。最好把它放在一个单独的服务中公开它 asObservable 而不是在组件中管理它：

export class AppComponent implements OnInit {
  title = 'Curiosity';
  placeholder: string = 'Type query in here';
  queryTerm: string = '';
  queryResult = new BehaviorSubject<IShipment[]>([]);

  constructor(private _sqlClientService: SQLClientService) {}

  ngOnInit(): void {}

  onQuery(): void {
    this._sqlClientService.sqlQuery(
      this.queryTerm,
      (response: IResponseObject) => this.updateResultSet(response)
    );
  }

  updateResultSet(response: IResponseObject): void {
    this.queryResult.next(response.recordset);
    console.log(this.queryResult);
  }
}

以及模板的相关部分：

<table id="dataTable" margin="5,5,5,5" class="table table-bordered" *ngFor="let item of queryResult | async">

Answer 2

如果在构造函数中导入 ChangeDetectorRef 并使用它，这会有帮助吗？

https://angular.io/api/core/ChangeDetectorRef

  constructor(private _sqlClientService: SQLClientService, private _changeDetectorRef ChangeDetectorRef) {}

  updateResultSet(response: IResponseObject): void {
    this.queryResult.next(response.recordset);
    _changeDetectorRef.detectChanges();
    console.log(this.queryResult);
  }

Angular 在 Electron 上 - 使用 Observable 更新 UI

Angular on Electron - using Observable to update UI

angular

asynchronous

electron

observable

ngfor