如何通过仅使用角度单击按钮来显示单独页面中表格中每一行的详细信息？

Question

我已使用模拟数据库将数据获取到表中。我还为每一行创建了按钮，但无法将按钮与行中的任何值关联。我已经使用http服务请求从模拟数据库中获取数据。以下是我的代码：

仪表板component.html

@BeforeEach
void init(){
   MyClass myClass = new Class();
   ReflectionTestUtils.setField(myClass, "executorService", MoreExecutors.newDirectExecutorService());
}

仪表板component.ts

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

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

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

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

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

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

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

    <!-- Action Column -->
    <ng-container matColumnDef="ActionColumn">
      <th mat-header-cell *matHeaderCellDef> Action Column </th>
      <td mat-cell  *matCellDef="let element"><button mat-button (click)='viewdata()'>View Data</button></td>
    </ng-container>

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

db.json

import { Component, OnInit } from '@angular/core';
import { AbsentList } from './myclass';
import { MyhttpService } from '../myhttp.service';
import { RouterService } from '../router.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
   displayedColumns: string[] = ['Id', 'Firstname', 'Lastname', 'Contactno', 'Startdate','Enddate','ActionColumn'];

   dataSource : Array<AbsentList>=[];

  constructor(private myserveobj:MyhttpService,private routerService: RouterService) { }

  ngOnInit() {

    this.myserveobj.getallNotes().subscribe
    (
     (ele)=>{this.dataSource=ele;},
     (err)=>{console.log(err);}
    )

  }

  viewdata(){
    this.routerService.routeToView();
  }

}

myclass.ts

{
    "AbsentList":[
        {
        "Id":"1",
        "Firstname":"abc",
        "Lastname":"xyz",
        "Contactno":"1234567891",
        "Startdate":"1/11/19",
        "Enddate":"4/11/19"
        },
        {
        "Id":"2",
        "Firstname":"aaa",
        "Lastname":"bbb",
        "Contactno":"9876543212",
        "Startdate":"6/11/19",
        "Enddate":"10/11/19"
        }


    ]
  }

myhttpservice

export class AbsentList
{
    Id:number;
    Firstname:string;
    Lastname:string;
    Contactno:string;
    Startdate:string;
    Enddate:string;
    constructor()
    {

    }
}