如何在 material-table 中显示 API 响应

Question

我有一个名为 List 的组件，因为我在垫卡中显示数据。当我单击特定的垫卡时，它正在路由到该组件中另一个名为 home 的组件，现在我在垫卡中显示特定的垫卡数据，如下所示：

但我想在 mat-table 中显示相同的数据这是 stackblitz DEMO .

Answer 1

您必须将合约声明为数组

TS

contract = [];

// push your response in contract array
this.contact.push(this.dataService.getSelectedCard());

请参阅https://stackblitz.com/edit/angular-movie-read-load-json-sample-eg-ttqvx7?embed=1

Answer 2

此处您需要将列 id 和 contactName 字段与 matColumnDef

绑定

 <table mat-table [dataSource]="contact" class="mat-elevation-z8">
  <!-- Position Column -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID. </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

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



  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

home.component.ts

export class HomeComponent implements OnInit {

  contact = [ {id: 1, contactName : "Parmeshwar"}]
  displayedColumns: string[] = ['id', 'contactName', 'email'];


  constructor(private dataService: DataService) { }

  ngOnInit() {

    this.contact = [this.dataService.getSelectedCard()];

  }

}

这里是Forked solution on stackblitz

Answer 3

试试这个标记，它按你预期的方式工作：

首页Html

<table mat-table [dataSource]="dataSource">

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

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

<ng-container matColumnDef="Column3">
    <th mat-header-cell *matHeaderCellDef>Column3 </th>
    <td mat-cell *matCellDef="let element">
        <button mat-flat-button color="primary"  class="booking-btn"><p>Book Now</p></button>
    </td>
  </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

首页TS

import { Component, OnInit } from '@angular/core';
import { DataService} from '../data.service'

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  dataSource: any;
  contact = [];
public displayedColumns: string[] = ['Column1', 'Column2', 'Column3'];
  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.contact.push(this.dataService.getSelectedCard());
    this.dataSource = this.contact;
  }

}

您还可以查看 link

https://stackblitz.com/edit/angular-movie-read-load-json-sample-eg-2wpytz?file=src%2Fapp%2Fhome%2Fhome.component.ts

Answer 4

您可以使 dataSource 成为一个对象数组。你可以通过 Stackblitz
主页组件：

export class HomeComponent implements OnInit {
public contact:Contact[]=[];
public dataSource:Contact[];
public displayedColumns: string[] = ['id', 'contactName', 'email'];
  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.contact.push(this.dataService.getSelectedCard());
    this.dataSource=this.contact;
  }
}

export interface Contact{
  id: string; 
  contactName:string;
  email:string;
}

home.conponent.html:

<table mat-table [dataSource]="dataSource">

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

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

              <ng-container matColumnDef="email">
                <th mat-header-cell *matHeaderCellDef> Email </th>
                <td mat-cell *matCellDef="let element">{{element.email}} </td>
              </ng-container>
              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>

如何在 material-table 中显示 API 响应

How to display API Response in a material-table

angular-material

angular

mat-table