我正在嘗試在前端使用帶有 Angular 的 Electron 開發桌面應用程式。它在后端使用 Node mssql 包來查詢資料庫，并且應該在有點像桌面的 UI 中呈現檢索到的資料——為了這個主題，假設它將在表格中可視化。
現在，在我弄清楚之前，該應用程式呈現如下：
具有提供直接 sql 查詢的文本輸入、發送它的按鈕和遍歷結果集的表。
組件的模板：
<input type="text" id="queryInput" margin="5,5,5,5" [placeholder]="placeholder" [(ngModel)]="queryTerm" />
<button (click)="onQuery()" margin="5,5,5,5">
Execute
</button>
<table id="dataTable" margin="5,5,5,5" *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(() => observer.next(this.getQueryResults()),1000);只是用來測驗它，然后它就可以作業，但這當然不是正確的方法。
uj5u.com熱心網友回復：
如果在建構式中匯入 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);
}
uj5u.com熱心網友回復：
我會使用 aBehaviorSubject來完成所需的行為。最好將它放在一個單獨的服務中并公開它，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">
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/469322.html