1

Angular material data is not rendering the data even though datasource has correct data to be displayed

Note: Paginator is working correctly according to the datasource

HTML

enter image description here

TS

this.assignmentDataSource = new MatTableDataSource<Assignment>(assignmentList); //assignmentList has data loaded
this.assignmentDataSource.paginator = this.paginator;

Output

enter image description here

Console

console.log(this.assignmentDataSource);

enter image description here

I want to know why the data is not rendering to the view

Thanks !!!

3
  • this.assignmentDataSource = new MatTableDataSource<any>(Object.values(assignmentList)); Commented Jan 14, 2020 at 7:01
  • @Vikas that's too not working Commented Jan 14, 2020 at 7:09
  • can u provide a stackblitz Commented Jan 14, 2020 at 7:20

2 Answers 2

1

There have matColumnDef directives, and this directive try to get the key of an object. But you define a bad key, and the dataTable cant read the objects. Try to add the excepted matColumnDef values.

Sign up to request clarification or add additional context in comments.

6 Comments

i think the way i referencing to matColumnDef is fine. correct me if i wrong <td mat-cell *matCellDef="let assignment">
Can you add a print from me about your ts file?
What attribute should I print?
Make a copy from your full TS file please.
Thanks @Anarno. This is where I missed. I have just created the displayedColumns variable and not defined any column names. After defining the column names, table rendering the data correctly
|
0

Try replacing tag <table></table> for <mat-table></mat-table>.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.