[英]RxJs operators and Angular: using async pipe and tap does not populate data
Here is my code snippet:这是我的代码片段:
In Typescript:在 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:在 HTML 模板中:
<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.我想要完成的是仅当来自可观察序列的数据完成时才显示 ag-grid。 I am first plucking the data which is deeply nested and then using
tap
operator to reverse the boolean binding to *ngIf
.我首先提取深度嵌套的数据,然后使用
tap
运算符将 boolean 绑定到*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.我想这可以使用订阅方法解决,但我想避免它,因为我直接在模板中使用异步 pipe。
You can rather wait for the observable itself, async
pipe would return null
until the Observable has resolved您可以等待可观察对象本身,
async
pipe 将返回null
直到可观察对象已解决
<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.在此示例中永远不会调用
metaData
,因为isDataSearch
以 false 开始。
Instead, you can wrap the <ag-grid-angular>
in an *ngIf
that invokes the observable, and pipe the result into a new variable.相反,您可以将
<ag-grid-angular>
包装在调用 observable 的*ngIf
中,并将结果 pipe 包装到新变量中。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.