Question

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

但是我想在 mat-table 中显示相同的数据。这是 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="Coloumn1">
      <th mat-header-cell *matHeaderCellDef> Coloumn1 </th>
      <td mat-cell *matCellDef="let element"> {{element.contactName}} </td>
    </ng-container>

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

<ng-container matColumnDef="Coloumn3">
    <th mat-header-cell *matHeaderCellDef>Coloumn3 </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[] = ['Coloumn1', 'Coloumn2', 'Coloumn3'];
  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>

如何在物料表中显示API响应

4 个答案: