Блог

Я пытаюсь загрузить данные из серверной части через API и отобразить в шаблоне html. Внутренний API работает и может отображаться в консоли при вводе. Но на странице html они не отображаются.

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

  selectedinstitution: string;
 selecteddept: string;
 filtertext:string;
 public status:boolean=false;
 public data= new Array();
 institutionalUsers: any;

 displayedColumns = [ 'select','username', 'firstname','lastname'];
 dataSource = new MatTableDataSource<Element>();
 selection = new SelectionModel<Element>(true, []);
 ngOnInit() { 

 this.manageuserService.loadUserListApiMethod()
  .subscribe((data:any)=> {
    this.dataSource.data=[data];
     console.log(data);
  });
}
  

Мой HTML-шаблон выглядит следующим образом,

 <!-- .......................... DATA TABLE .............................-->             
<div class="table-container mat-elevation-z8" style="margin-top: 10px;" >
        <mat-table #table [dataSource]="dataSource">
                  
                  
                <!-- Checkbox Column -->
                <ng-container matColumnDef="select" >
                  <mat-header-cell style="max-width:50px;" *matHeaderCellDef>
                    <mat-checkbox (change)="$event ? masterToggle() : null"
                                  [checked]="selection.hasValue() amp;amp; isAllSelected()"
                                  [indeterminate]="selection.hasValue() amp;amp; !isAllSelected()">
                    </mat-checkbox>
                  </mat-header-cell>
                  <mat-cell style="max-width:50px;" *matCellDef="let row">
                    <mat-checkbox (click)="$event.stopPropagation()"
                                  (change)="$event ? selection.toggle(row) : null"
                                  [checked]="selection.isSelected(row)">
                    </mat-checkbox>
                  </mat-cell>
                </ng-container>
                
                
            <ng-container matColumnDef="username">
              <mat-header-cell *matHeaderCellDef> User Name </mat-header-cell>
              <mat-cell *matCellDef="let element"> {{element.sUsername}} </mat-cell>
            </ng-container>
            
            <ng-container matColumnDef="firstname">
              <mat-header-cell *matHeaderCellDef> First Name </mat-header-cell>
              <mat-cell *matCellDef="let element"> {{element.sFname}} </mat-cell>
            </ng-container>
    
                <ng-container matColumnDef="lastname">
              <mat-header-cell *matHeaderCellDef>Last Name </mat-header-cell>
              <mat-cell *matCellDef="let element"> {{element.sLname}} </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> 
          
<!-- .......................... DATA TABLE PAGINATOR ..........................-->  
          <div>
            <mat-paginator #paginator style="height: 45px;"
                [pageSize]="10"
                [pageSizeOptions]="[5, 10, 25, 100]">
            </mat-paginator>
          </div>
        
</div>
  

Где я ошибся?

Я думаю, вам следует полностью переназначить dataSource вместо того, чтобы изменять объект, например, так:

 subscribe((data: any) => { 
  const source = new MatTableDataSource<Element>()
  source.data = [data];
  this.dataSource = source;
 })