Angular 在 Electron 上 - 使用 Observable 更新 UI
Angular on Electron - using Observable to update UI
我正在尝试在前端使用 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);
只是为了测试它,然后它就起作用了,但这当然不是正确的方法。
我会使用 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">
如果在构造函数中导入 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 开发桌面应用程序。它在后端使用 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);
只是为了测试它,然后它就起作用了,但这当然不是正确的方法。
我会使用 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">
如果在构造函数中导入 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);
}