Невозможно отобразить данные таблицы матов без ошибок

Question

Я новичок в angular, я не могу показать данные в моей таблице матов, и она не показывает никаких ошибок. Я могу видеть имя столбца, но не данные. Может кто-нибудь сказать мне, что я сделал не так в этом.

api.service.ts

    export class ApiService {
     dataRow:any;
    }
constructor(private httpClient : HttpClient) { }

service.component. html

<tr mat-header-row *matHeaderRowDef="['sid','vid','serviceName','createdOn']"></tr>
        <tr class="rowhover" (click)="displayData(row,row.sid)" mat-row *matRowDef="let row; columns: ['sid','vid','serviceName','createdOn']"></tr>
        </table>

service.component.ts

 displayData(row,sid:any)
  {
   // console.log(row);    
    this.apiService.dataRow=row;
   this.router.navigate(["/vendor-list/vendor/a/services/a/details/",sid]);
  }

service-detail.component. html

 <table mat-table [dataSource]="serviceDetailsDataSource" class="mat-elevation-z1">
            <ng-container matColumnDef="sid">
                <th mat-header-cell *matHeaderCellDef> Service ID </th>
                <td mat-cell *matCellDef="let element"> {{element.sid}} </td>
            </ng-container>

            <ng-container matColumnDef="vid">
                <th mat-header-cell *matHeaderCellDef> Vendor ID </th>
                <td mat-cell *matCellDef="let element"> {{element.vid}} </td>
            </ng-container>

            <ng-container matColumnDef="serviceName">
                <th mat-header-cell *matHeaderCellDef> Service Name </th>
                <td mat-cell *matCellDef="let element"> {{element.serviceName}} </td>
            </ng-container>

            <ng-container matColumnDef="serviceDescription">
                <th mat-header-cell *matHeaderCellDef> Service Description </th>
                <td mat-cell *matCellDef="let element"> {{element.serviceDescription}} </td>
            </ng-container>

            <ng-container matColumnDef="createdOn">
                <th mat-header-cell *matHeaderCellDef> Created On </th>
                <td mat-cell *matCellDef="let element"> {{element.createdOn}} </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="['sid','vid','serviceName','serviceDescription','createdOn']"></tr>
            <tr mat-row *matRowDef="let row; columns: ['sid','vid','serviceName','serviceDescription','createdOn']"></tr>
            </table>

service-detail.component.ts

import { Component, OnInit  } from '@angular/core';
import { ApiService } from 'src/app/api.service';
import { MatTableDataSource } from '@angular/material';

@Component({
  selector: 'app-service-detail',
  templateUrl: './service-detail.component.html',
  styleUrls: ['./service-detail.component.css']
})
export class ServiceDetailComponent implements OnInit {

  serviceDetailsDataSource:any;

  serviceDetailsDisplayedColumns: string[] = ['serviceID', 'vendorID', 'createdOn'];
  /*serviceDetailsDataSource = SERVICE_DETAILS_DATA;*/

  constructor(public apiService:ApiService) { }
  dataRow1:any;
  ngOnInit() {
    this.dataRow1=this.apiService.dataRow;
    //this.serviceDetailsDataSource=this.dataRow1;
    this.serviceDetailsDataSource=new MatTableDataSource(this.dataRow1); 
    console.log(this.serviceDetailsDataSource)
  }

}

Answer 1

Вам необходимо включить данные, которые вы получаете от службы, в массив.

изменить

 this.serviceDetailsDataSource=new MatTableDataSource(this.dataRow1);

на

this.serviceDetailsDataSource=new MatTableDataSource([this.dataRow1]);

Надеюсь, это поможет!

Answer 2

Ваши данные, поступающие из API, имеют формат json, поэтому вам просто нужно поставить квадратную скобку в MatTableDataSource([this.dataRow1]);