无法在无错误的垫表上显示数据答案

【问题标题】：Not able to show data on mat table with no error无法在无错误的垫表上显示数据
【发布时间】：2020-04-10 20:36:50
【问题描述】：

我是 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)
  }

}

【问题讨论】：

您能在此处添加更多 ts 文件的代码吗？
@Tushar 添加了它
你的 JSON 结构？并且正在从 API 获取数据？
您能否添加您的服务文件代码以获得dataRow。如果它返回observable，请订阅它。
@SRana 我只知道订阅方法。 dataRow 在我的服务中是可变的。如何订阅？

标签： angular typescript angular-material

【解决方案1】：

您需要将您从服务中获取的数据包含在一个数组中。

改变

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

到

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

希望这会有所帮助！

【讨论】：

【解决方案2】：

你的来自api的数据是json格式的，所以你只需要在MatTableDataSource([this.dataRow1]);中加上方括号

【讨论】：