Material Data Table not showing updated data
My material data table doesn't show/update when the input data is changed. Only if I call the refresh function from a button. Inside the ngOnChanges, the refresh doesn't work either.
How do I update the view of the table except by calling the refresh function via a button?
export interface VariableObject {
name: string;
node: string;
status: string;
subscriber: any;
type: string;
value: any;
}
Component
@Input() data: VariableObject;
displayedColumns: string = ['name', 'type', 'status', 'value'];
dataSource = new MatTableDataSource<VariableObject>();
ngOnChanges(changes: SimpleChanges): void {
this.dataSource = new MatTableDataSource<VariableObject>(this.data); }
refresh() {
this.dataSource = new MatTableDataSource<VariableObject>(this.data); }
angular datatable angular-material onchange asked Nov 23 '18 at 8:15
F. CeptionF. Ception
55
add a comment |
My material data table doesn't show/update when the input data is changed. Only if I call the refresh function from a button. Inside the ngOnChanges, the refresh doesn't work either.
How do I update the view of the table except by calling the refresh function via a button?
export interface VariableObject {
name: string;
node: string;
status: string;
subscriber: any;
type: string;
value: any;
}
Component
@Input() data: VariableObject;
displayedColumns: string = ['name', 'type', 'status', 'value'];
dataSource = new MatTableDataSource<VariableObject>();
ngOnChanges(changes: SimpleChanges): void {
this.dataSource = new MatTableDataSource<VariableObject>(this.data); }
refresh() {
this.dataSource = new MatTableDataSource<VariableObject>(this.data); }
asked Nov 23 '18 at 8:15
F. CeptionF. Ception
55
1
What about usingChangeDetectionRef.detectChanges()in theonChangesafter the assignment?
– Jacopo Sciampi
Nov 23 '18 at 8:34
1
Do you have a ChangeDetectionStrategy ofOnPushin this Component?
– SiddAjmera
Nov 23 '18 at 8:38
Doesn't work. I've added changeDetection with OnPush, but the data table is still emtpy, even after receiving the updated data.
– F. Ception
Nov 23 '18 at 8:42
I was just asking if you had that? It won't work if you had that. But should work if you don't. There's something else that's wrong. It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 23 '18 at 8:50
stackblitz.com/edit/angular-uuqesq
– F. Ception
Nov 23 '18 at 9:04
add a comment |
My material data table doesn't show/update when the input data is changed. Only if I call the refresh function from a button. Inside the ngOnChanges, the refresh doesn't work either.
How do I update the view of the table except by calling the refresh function via a button?
export interface VariableObject {
name: string;
node: string;
status: string;
subscriber: any;
type: string;
value: any;
}
Component
@Input() data: VariableObject;
displayedColumns: string = ['name', 'type', 'status', 'value'];
dataSource = new MatTableDataSource<VariableObject>();
ngOnChanges(changes: SimpleChanges): void {
this.dataSource = new MatTableDataSource<VariableObject>(this.data); }
refresh() {
this.dataSource = new MatTableDataSource<VariableObject>(this.data); }
asked Nov 23 '18 at 8:15
F. CeptionF. Ception
55
My material data table doesn't show/update when the input data is changed. Only if I call the refresh function from a button. Inside the ngOnChanges, the refresh doesn't work either.
How do I update the view of the table except by calling the refresh function via a button?
export interface VariableObject {
name: string;
node: string;
status: string;
subscriber: any;
type: string;
value: any;
}
Component
@Input() data: VariableObject;
displayedColumns: string = ['name', 'type', 'status', 'value'];
dataSource = new MatTableDataSource<VariableObject>();
ngOnChanges(changes: SimpleChanges): void {
this.dataSource = new MatTableDataSource<VariableObject>(this.data); }
refresh() {
this.dataSource = new MatTableDataSource<VariableObject>(this.data); }
asked Nov 23 '18 at 8:15
F. CeptionF. Ception
55
asked Nov 23 '18 at 8:15
F. CeptionF. Ception
55
asked Nov 23 '18 at 8:15
F. CeptionF. Ception
55
asked Nov 23 '18 at 8:15
F. CeptionF. Ception
55
asked Nov 23 '18 at 8:15
F. CeptionF. Ception
55
55
1
What about usingChangeDetectionRef.detectChanges()in theonChangesafter the assignment?
– Jacopo Sciampi
Nov 23 '18 at 8:34
1
Do you have a ChangeDetectionStrategy ofOnPushin this Component?
– SiddAjmera
Nov 23 '18 at 8:38
Doesn't work. I've added changeDetection with OnPush, but the data table is still emtpy, even after receiving the updated data.
– F. Ception
Nov 23 '18 at 8:42
I was just asking if you had that? It won't work if you had that. But should work if you don't. There's something else that's wrong. It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 23 '18 at 8:50
stackblitz.com/edit/angular-uuqesq
– F. Ception
Nov 23 '18 at 9:04
add a comment |
1
What about usingChangeDetectionRef.detectChanges()in theonChangesafter the assignment?
– Jacopo Sciampi
Nov 23 '18 at 8:34
1
Do you have a ChangeDetectionStrategy ofOnPushin this Component?
– SiddAjmera
Nov 23 '18 at 8:38
Doesn't work. I've added changeDetection with OnPush, but the data table is still emtpy, even after receiving the updated data.
– F. Ception
Nov 23 '18 at 8:42
I was just asking if you had that? It won't work if you had that. But should work if you don't. There's something else that's wrong. It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 23 '18 at 8:50
stackblitz.com/edit/angular-uuqesq
– F. Ception
Nov 23 '18 at 9:04
1
1
What about using
ChangeDetectionRef.detectChanges() in the onChanges after the assignment?– Jacopo Sciampi
Nov 23 '18 at 8:34
What about using
ChangeDetectionRef.detectChanges() in the onChanges after the assignment?– Jacopo Sciampi
Nov 23 '18 at 8:34
1
1
Do you have a ChangeDetectionStrategy of
OnPush in this Component?– SiddAjmera
Nov 23 '18 at 8:38
Do you have a ChangeDetectionStrategy of
OnPush in this Component?– SiddAjmera
Nov 23 '18 at 8:38
Doesn't work. I've added changeDetection with OnPush, but the data table is still emtpy, even after receiving the updated data.
– F. Ception
Nov 23 '18 at 8:42
Doesn't work. I've added changeDetection with OnPush, but the data table is still emtpy, even after receiving the updated data.
– F. Ception
Nov 23 '18 at 8:42
I was just asking if you had that? It won't work if you had that. But should work if you don't. There's something else that's wrong. It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 23 '18 at 8:50
I was just asking if you had that? It won't work if you had that. But should work if you don't. There's something else that's wrong. It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 23 '18 at 8:50
stackblitz.com/edit/angular-uuqesq
– F. Ception
Nov 23 '18 at 9:04
stackblitz.com/edit/angular-uuqesq
– F. Ception
Nov 23 '18 at 9:04
add a comment |
1 Answer
1
active
oldest
votes
As far as I'm aware, Angular doesn't recognize if an object has changed. It can only listen to changes on variables and (probably) properties of objects.
Maybe you could listen on a different variable, triggering the event when it gets modified on data change
The following is a workaround:
this.ObjectName = Object.assign({}, this.ObjectName);
That way Angular detects the change and fires ngOnChanges. You will have to reassign your object in the parent component.
edited Nov 23 '18 at 17:06
Alonso Dominguez
6,34311936
answered Nov 23 '18 at 8:22
Nikolai KieferNikolai Kiefer
196210
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - From Review
– CozyAzure
Nov 23 '18 at 10:04
I edited my answer to make my point clear wich was that the angular check system sometimes is flawed when it comes to objects and arrays. Which answers why ngOnchanges doesnt fire @CozyAzure
– Nikolai Kiefer
Nov 23 '18 at 10:22
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53442859%2fmaterial-data-table-not-showing-updated-data%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
As far as I'm aware, Angular doesn't recognize if an object has changed. It can only listen to changes on variables and (probably) properties of objects.
Maybe you could listen on a different variable, triggering the event when it gets modified on data change
The following is a workaround:
this.ObjectName = Object.assign({}, this.ObjectName);
That way Angular detects the change and fires ngOnChanges. You will have to reassign your object in the parent component.
edited Nov 23 '18 at 17:06
Alonso Dominguez
6,34311936
answered Nov 23 '18 at 8:22
Nikolai KieferNikolai Kiefer
196210
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - From Review
– CozyAzure
Nov 23 '18 at 10:04
I edited my answer to make my point clear wich was that the angular check system sometimes is flawed when it comes to objects and arrays. Which answers why ngOnchanges doesnt fire @CozyAzure
– Nikolai Kiefer
Nov 23 '18 at 10:22
add a comment |
As far as I'm aware, Angular doesn't recognize if an object has changed. It can only listen to changes on variables and (probably) properties of objects.
Maybe you could listen on a different variable, triggering the event when it gets modified on data change
The following is a workaround:
this.ObjectName = Object.assign({}, this.ObjectName);
That way Angular detects the change and fires ngOnChanges. You will have to reassign your object in the parent component.
edited Nov 23 '18 at 17:06
Alonso Dominguez
6,34311936
answered Nov 23 '18 at 8:22
Nikolai KieferNikolai Kiefer
196210
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - From Review
– CozyAzure
Nov 23 '18 at 10:04
I edited my answer to make my point clear wich was that the angular check system sometimes is flawed when it comes to objects and arrays. Which answers why ngOnchanges doesnt fire @CozyAzure
– Nikolai Kiefer
Nov 23 '18 at 10:22
add a comment |
As far as I'm aware, Angular doesn't recognize if an object has changed. It can only listen to changes on variables and (probably) properties of objects.
Maybe you could listen on a different variable, triggering the event when it gets modified on data change
The following is a workaround:
this.ObjectName = Object.assign({}, this.ObjectName);
That way Angular detects the change and fires ngOnChanges. You will have to reassign your object in the parent component.
edited Nov 23 '18 at 17:06
Alonso Dominguez
6,34311936
answered Nov 23 '18 at 8:22
Nikolai KieferNikolai Kiefer
196210
As far as I'm aware, Angular doesn't recognize if an object has changed. It can only listen to changes on variables and (probably) properties of objects.
Maybe you could listen on a different variable, triggering the event when it gets modified on data change
The following is a workaround:
this.ObjectName = Object.assign({}, this.ObjectName);
That way Angular detects the change and fires ngOnChanges. You will have to reassign your object in the parent component.
edited Nov 23 '18 at 17:06
Alonso Dominguez
6,34311936
answered Nov 23 '18 at 8:22
Nikolai KieferNikolai Kiefer
196210
edited Nov 23 '18 at 17:06
Alonso Dominguez
6,34311936
edited Nov 23 '18 at 17:06
Alonso Dominguez
6,34311936
edited Nov 23 '18 at 17:06
Alonso Dominguez
6,34311936
6,34311936
answered Nov 23 '18 at 8:22
Nikolai KieferNikolai Kiefer
196210
answered Nov 23 '18 at 8:22
Nikolai KieferNikolai Kiefer
196210
answered Nov 23 '18 at 8:22
Nikolai KieferNikolai Kiefer
196210
196210
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - From Review
– CozyAzure
Nov 23 '18 at 10:04
I edited my answer to make my point clear wich was that the angular check system sometimes is flawed when it comes to objects and arrays. Which answers why ngOnchanges doesnt fire @CozyAzure
– Nikolai Kiefer
Nov 23 '18 at 10:22
add a comment |
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - From Review
– CozyAzure
Nov 23 '18 at 10:04
I edited my answer to make my point clear wich was that the angular check system sometimes is flawed when it comes to objects and arrays. Which answers why ngOnchanges doesnt fire @CozyAzure
– Nikolai Kiefer
Nov 23 '18 at 10:22
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - From Review
– CozyAzure
Nov 23 '18 at 10:04
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - From Review
– CozyAzure
Nov 23 '18 at 10:04
I edited my answer to make my point clear wich was that the angular check system sometimes is flawed when it comes to objects and arrays. Which answers why ngOnchanges doesnt fire @CozyAzure
– Nikolai Kiefer
Nov 23 '18 at 10:22
I edited my answer to make my point clear wich was that the angular check system sometimes is flawed when it comes to objects and arrays. Which answers why ngOnchanges doesnt fire @CozyAzure
– Nikolai Kiefer
Nov 23 '18 at 10:22
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53442859%2fmaterial-data-table-not-showing-updated-data%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
What about using
ChangeDetectionRef.detectChanges()in theonChangesafter the assignment?– Jacopo Sciampi
Nov 23 '18 at 8:34
1
Do you have a ChangeDetectionStrategy of
OnPushin this Component?– SiddAjmera
Nov 23 '18 at 8:38
Doesn't work. I've added changeDetection with OnPush, but the data table is still emtpy, even after receiving the updated data.
– F. Ception
Nov 23 '18 at 8:42
I was just asking if you had that? It won't work if you had that. But should work if you don't. There's something else that's wrong. It would be great if you could provide a Minimal, Complete, and Verifiable example. You can use StackBlitz to create one.
– SiddAjmera
Nov 23 '18 at 8:50
stackblitz.com/edit/angular-uuqesq
– F. Ception
Nov 23 '18 at 9:04