Here is my code snippet:
In Typescript:
isDataSearch = false;
getDatacollectionByID() {
const params = {
id: <some random ID>,
};
this.metaData = this.dataService.getDatacollectionByID(params)
.pipe(
pluck('level1', 'level2', 'level3'),
tap(() => this.isDataSearch = true),
map(metaData => [metaData]), // to be used as an array for ag grid
)
}
In HTML template:
<ag-grid-angular
*ngIf="isDataSearch"
[gridOptions]="dataCollectionConfig"
[rowData]="metaData | async"
[modules]="modules"
class="ag-theme-balham data-collection-grid"
>
</ag-grid-angular>
What I am trying to accomplish is to show the ag-grid only when the data from observable sequence is done. I am first plucking the data which is deeply nested and then using tap
operator to reverse the boolean binding to *ngIf
.
I guess this can be fixed using subscribe method but I want to avoid it because I am using async pipe in template directly.
You can rather wait for the observable itself, async
pipe would return null
until the Observable has resolved
<ag-grid-angular
*ngIf="metaData | async as resolvedMetaData"
[gridOptions]="dataCollectionConfig"
[rowData]="resolvedMetaData"
[modules]="modules"
class="ag-theme-balham data-collection-grid"
>
metaData
will never be invoked in this example because isDataSearch
starts off as false.
Instead, you can wrap the <ag-grid-angular>
in an *ngIf
that invokes the observable, and pipe the result into a new variable.
<ng-container *ngIf="metaData | async as result">
<ag-grid-angular
[gridOptions]="dataCollectionConfig"
[rowData]="result"
[modules]="modules"
class="ag-theme-balham data-collection-grid"
>
</ag-grid-angular>
</ng-container>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.