angular - 如何在材料表中显示 API 响应

Question

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

但我想在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()];

  }

}

这是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;
  }

}

您也可以查看链接

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

Answer 4

您可以将 dataSource 设为对象数组。你可以通过Stackblitz HomeComponent
：

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>