create table dynamically using ngfor. ERROR Error: Provided data source did not match an array, Observable, or DataSource

Question

Hi i have a component where in the html have a code like

<div *ngFor="let group of groups; index as index">
  <div *ngIf="group0.lenght > 0">
     <mat-table [datasource]="'group'+index">

     </mat-table>
  </div>
</div>

before i have a code that filter the items by the groupid like a foreign key

group0 = this.items.filter(x => x.group_uuid == this.groups[i].uuid)
groupn = this.items.filter(x => x.group_uuid == this.groups[n].uuid)

but the problem is when the table appears, i got the next error: ERROR Error: Provided data source did not match an array, Observable, or DataSource

any idea? thanks in advance

You need to put all your groups in an array. Right now you pass a string to datasource instead of an array. It's the same as trying to call a variable by string with name of the variable. As long the c = a + b not equal to c = 'a' + 'b' code above will not be working. — izmaylovdev
– izmaylovdev, Commented Aug 4, 2021 at 22:03

izmaylovdev · Accepted Answer · 2021-08-04 22:08:56Z

1

You need store groups in an array.

groupsOfItems = this.groups
  .map(group => this.items.filter(x => x.group_uuid === group.uuid));

in template:

<div *ngFor="let group of groupsOfItems; index as index">
  <div *ngIf="group.lenght > 0">
     <mat-table [datasource]="group">

     </mat-table>
  </div>
</div>

answered Aug 4, 2021 at 22:08

izmaylovdev

1,88011 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

create table dynamically using ngfor. ERROR Error: Provided data source did not match an array, Observable, or DataSource

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related