angular / angular/components

bug(mat-table): Table not refreshing on nested detail-row column change

Offen
#30,720 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/table P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

I'm not sure if this scenario is supported by the API at all but imho it should be a valid scenario.

If I have an array of detail rows changing their columns does not automatically redraw the table. If I know all the rows in advance (do not use `@for`) it works as expected.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/av2ud5lm

Steps to reproduce:
1. Clicking **Toggle Secondary** changes the json-output but not the table
2. Only on clicking **Toggle Primary** the table gets redrawn, respecting the current definition for the detail rows

Working StackBlitz link: https://stackblitz.com/edit/av2ud5lm-ardwk8i8
Just to make sure this also happens if all the rows are in a single array (https://stackblitz.com/edit/av2ud5lm-yhdxrfqp)

Not this being a Q/A but just out of curiosity, why do I need `multiTemplateDataRows` at all? Why won't all (matching) rows get displayed by default? Asking since I tend to always use / set it but guess there might be some kind of disadvantage since this is not the default behavior?

### Expected Behavior

Even generic detail rows (created by `@for`) should behave correct.

### Actual Behavior

Right now, I need to know all my detail rows in advance. Since I'm implementing a pretty customizable table, I want to let the user create / define the rows in runtime.

If you're not going to support this case officially, a neat workaround to trigger redrawing the table would be welcome.

### Environment

Angular CLI: 19.1.9
Node: 22.11.0
Package Manager: pnpm 10.6.2
OS: win32 x64

Angular: 19.1.8
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
... service-worker

Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.1901.9 (cli-only)
@angular-devkit/build-angular 19.1.9
@angular-devkit/core 19.1.9 (cli-only)
@angular-devkit/schematics 19.1.9 (cli-only)
@angular/cdk 19.1.5
@angular/cli 19.1.9
@angular/material 19.1.5
@angular/material-luxon-adapter 19.1.5
@schematics/angular 19.1.9 (cli-only)
rxjs 7.8.2
typescript 5.7.3
zone.js 0.15.0

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Führe die primäre StackBlitz-Reproduktion aus und vergleiche sie mit den funktionierenden Links. Konzentriere dich dabei auf mat-table-Detailzeilen, die mit @for erstellt werden, sowie auf das Verhalten von Toggle Secondary/Toggle Primary. Verfolge, wie multiTemplateDataRows auf Laufzeitänderungen der Spalten reagiert. Als erledigt gilt die Aufgabe, wenn die Tabelle nach Toggle Secondary neu gezeichnet wird oder eine dokumentierte Behelfslösung bereitgestellt wird, falls das Szenario nicht unterstützt wird.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.