Retrieved object from back service is not displaying on Angular html page

Issue

I am trying to fetch user permission data for particular user when search button pressing and displaying on angular html page, But I am not able to see after I putted the datasource at html.And in console.log , JSON object is successfully showing. Only problem with datasource on front -end,

My service subscription is like the following,

  import { SelectionModel } from '@angular/cdk/collections';
  import { Component, OnInit, ViewChild } from '@angular/core';
  import { MatDialog } from '@angular/material/dialog';
  import { MatTableDataSource } from '@angular/material/table';
  import { ManageuserService } from 'src/app/services/asset/manageuser.service';
  .
  .
  masterToggle() 
   {
    this.isAllSelected() ?
    this.selection.clear() :
    this.dataSource.data.forEach(row => this.selection.select(row));
  }
  dataSource: MatTableDataSource<any>;
 .
 .
 getUserPermisionsByUsernameSearch()
 {
  var param:string=this.permissionRequestUser;
    this.manageuserService.getUserPermissionApiMethod(param)
      .subscribe((data:any)=> {this.dataSource=new MatTableDataSource(data); console.log(data);});
  } 

And in console.log , I am getting data. And my front-end html file like the following,

<br/>
    <div>
    <div>
        <button  mat-raised-button color="primary" (click)="getUserPermisionsByUsernameSearch()" >
                Search Permission</button>
 
 </div>
<br/> 
<div>
<mat-table #table [dataSource]="dataSource">
  <!-- ................................ ACCOUNT NO COLUMN .............................. -->  

  <ng-container matColumnDef="nUserId">
              <mat-header-cell style="min-width:150px;" *matHeaderCellDef> User ID</mat-header-cell>
              <mat-cell style="min-width:150px;" *matCellDef="let element"> {{element.nUserId}} 
</mat-cell>
            </ng-container>

  <ng-container matColumnDef="nPermissionId">
              <mat-header-cell style="min-width:150px;" *matHeaderCellDef> Permission Id</mat-header-cell>
              <mat-cell style="min-width:150px;" *matCellDef="let element"> {{element.nPermissionId}} </mat-cell>
            </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"
                         (click)="selection.toggle(row)">
        </mat-row>

  </mat-table>

</div>

And when page is loading, I am not able to see anything as API result, but in console.log JSON is displaying.

How can I troubleshoot the problem here?

Solution

Try to change your code as below.

//declare the dataSource variable
displayedColumns = [ 'nUserId','nPermissionId'];
  dataSource = new MatTableDataSource();

    getUserPermisionsByUsernameSearch(){
  let param:string=this.permissionRequestUser;
    this.manageuserService.getUserPermissionApiMethod(param)
      .subscribe((data:any)=> {
        this.dataSource.data=[data];
         console.log(data);
      });
  } 

Answered By - surendra kumar