电子上的Angular-使用可观察到UI的可观察

Question

我正在尝试使用带有Angular的电子前端开发一个桌面应用程序。它利用后端的节点MSSQL软件包来查询数据库，并应以某种桌面的UI显示检索到的数据 - 为了该主题，可以说将在表中可视化。

目前，直到我要弄清楚它，应用程序会呈现出来：

具有文本输入以提供直接的SQL查询，将其发送的按钮以及通过ResultSet进行迭代。

组件的模板：

 <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>

这是组件类：

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可以填充桌子。

我可以看到数据检索已经完成，因为UpdaterEsultSet正在在控制台中显示它，但是我不太了解如何将其推向UI。

我该如何触发下一步（）？

一旦我使用setInterval（（）=＆gt; observer.next（this.getQueryResults（）），1000）;仅进行对其进行测试，然后它有效，但这不是正确的过程。

Answer 1

如果您在构造函数中导入更换eTectorRef并使用它，这会有所帮助吗？

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

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

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

Answer 2

我将使用evaryubject来完成所需的行为。最好将其放入单独的服务中，并将其暴露在中，而不是在组件中管理它：

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">