Объект, полученный из задней службы, не отображается на странице Angular html

Question

Я пытаюсь получить данные о разрешениях для конкретного пользователя при нажатии кнопки поиска и отображении на странице angular html, но я не могу видеть после того, как поместил источник данных в html. И в консоли. log, объект JSON успешно отображается. Единственная проблема с источником данных во внешнем интерфейсе,

Моя подписка на сервис выглядит следующим образом:

  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);});
  } 

И в console.log я получаю данные. И мой интерфейсный html файл, как показано ниже,

<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>

И когда страница загружается, ничего не видно в результате API, но в console.log отображается JSON.

Кто-нибудь может помочь мне решить проблему, пожалуйста?

Answer 1

Попробуйте изменить свой код, как показано ниже.

//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);
      });
  }