Open shlomiassaf opened 4 years ago
One idea towards a fix is to use the call to _getAllRenderRows()
just before calculating the diff.
_getAllRenderRows()
iterates over all rows to be rendered and extracts their rowDef template (PERFECT!) which can be compared to the actual rendered row def template and if different, remove it from returned results (this._renderRows)
so it will hit in the diff.
This comparison is super fast as we compare references of the rowDef
@shlomiassaf yeah, it does sound like the table should just re-grab all of the rowDefs before running the differ.
This issue should not be labeled "has pr" @jelbourn. Btw, what happened to pr https://github.com/angular/components/pull/20765?
Seems like that PR stalled out due to failures inside Google and hasn't been enough of a priority to investigate further.
The CDK Table will detect changes in rows based on a differ which is based on the
trackBy
input function.https://github.com/angular/components/blob/4152aec5d421d993246b1ede3803027082330492/src/cdk/table/table.ts#L517-L519
This is fine when actual data changes but it does not handle a scenario where the row template has changed but the data has not changed, which is an issue especially when working with virtual scroll.
Since the trackBy handler does not get access to the
rowDef
, only to the index and raw row data, it is not possible to workaround.In some cases, one might write an alternate
trackBy
function but it will not do for all scenarios. Moreover, thetrackBy
function must be dead simple and fast, if the view port is large, showing enough rows with enough columns it becomes a bottleneck.Usually, most performant way to do the trackBy is just return the index.
However, if the rowDef has changed, it will not be possible to detect it.
Once diff has been calculated, the call to
renderRows
will ignore the change in the row template definitionhttps://github.com/angular/components/blob/4152aec5d421d993246b1ede3803027082330492/src/cdk/table/table.ts#L611-L623
It will not call
_renderCellTemplateForItem
leaving it with the old template cached in the table.Reproduction
https://stackblitz.com/edit/angular-qvzms7?file=src%2Fapp%2Ftable-flex-basic-example.ts
Basically, we need to have multiple row definitions (CdkRowDef) but
multiTemplateDataRows
is set to false. We define 2 row templates withwhen
predicates, where the 2 predicates are opposite, if one is on the other is off and vice versa.Using a simple button to toggle a boolean flag we switch between the 2 predicates.
If we use a simple button it will not work, we switch the flag but it does not change the rendered template for the row.
Using the
ChangeDetectorRef
to run manual CD will not work as well because the table handles it's own diff mechanism when it comes to row diffing.The only way (I found so far...) to force the proper row template to render is calling
_forceRenderDataRows();
which is private. The will force render the entire dataset, using the new row template. This is bad of course, as it's using a private method and it will force render ALL rows, while in real scenarios one will only want some to re-render.Expected Behavior
What behavior were you expecting to see? Being able to change the row definition template and have the CDK Table autodetect and render it.
Actual Behavior
What behavior did you actually see? CDK Table fail to detect changes in the row definition template.
Environment