0

Im using Tablesaw in my Angular 5 project but its not working when Im getting my table data from service but its working with static data.

export class MmrParticipationListComponent implements OnInit {
pid; mid; participationList; approversList = [];

constructor(private activatedRoute: ActivatedRoute, private programService: 
ProgramService) { }

ngOnInit() {
this.activatedRoute.queryParams.subscribe(params => {
  this.pid = +params['pid'];
  this.mid = +params['mid'];

  this.programService.getParticipationList(this.pid, this.mid, 0).subscribe(a => {
    this.participationList = a;

    this.programService
      .getParticipationListPerEachGroup(this.pid, this.mid, this.participationList.FillRepeater[0].MMRPTID)
      .subscribe(b => {     this.approversList = b;}
      );
    });
   });
  }
}

<table *ngIf="approversList" class="tablesaw tablesaw-stack table table-
hover table-custom" data-tablesaw-mode="stack">
<thead>
<tr>      <th>Role</th>   <th>Name</th>    </tr>
</thead>
<tbody>
<tr *ngFor="let item of approversList">    
<td>{{item.Role}}</td>  <td>{{item.Name}}</td>  
</tr>
 </tbody>
</table>
user9086883
  • 25
  • 7

2 Answers2

1

Most likely, Tablesaw is initialising before you are receiving the data from your service.

Add an *ngIf="results" on the component selector. Angular won't run that component until you have the data from your service.

Joshua Britz
  • 36
  • 3
  • what do you mean by component selector? Tablesaw working by adding tablesaw, tablesaw-stack classes and some data attribute... I added *ngIf="results" on my table but its not working – user9086883 Mar 04 '18 at 08:20
  • Try not initialising your approved list array. An empty array is still evaluated as true, so Angular is passing an empty array to your table. – Joshua Britz Mar 04 '18 at 10:26
  • Thank you dude, You are awsome. – user9086883 Mar 04 '18 at 11:00
0

Add an *ngIf="results" on the component selector. Angular won't run the component until you have the data from the service.

Joshua Britz
  • 36
  • 3