Невозможно получить идентификатор выбранной строки, используя кнопку в каждой строке таблицы углов 7

Question

У меня есть компонент коврика из углового материала.Я заполняю его и хочу получить идентификатор выбранной строки.В каждой строке я поместил кнопку, с помощью которой я хочу получить этот идентификатор.Ниже я положил изображение этого изображение мат-таблицы .В столбце «Id» я печатаю реальные значения Id, которые я хочу получить.Может быть, у кого-то возникла такая же проблема.

AVAILABLE-COURSES.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { CourseService } from 'src/app/_services/course.service';
import { AuthService } from 'src/app/_services/auth.service';
import { MatPaginator, MatSort, MatTableDataSource } from         '@angular/material';
import { courseEnrolments } from 'src/app/_models/courseEnrolments';

@Component({
 selector: 'app-available-courses',
   templateUrl: './available-courses.component.html',
   styleUrls: ['./available-courses.component.scss']
 })
  export class AvailableCoursesComponent implements OnInit {
   dataSource = new MatTableDataSource();
    courseEnrolments: courseEnrolments[];
   displayedColumns = [
    'id',
    'name',
    'description',
    'other',
    'checked',
   ];
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;

   constructor(
   private courseService: CourseService,
   private authService: AuthService
   ) {}

   ngOnInit() {
   this.courseService
  .getAllCourses()
  .subscribe(result => {

    if (!result) {
      return;
    }

    this.dataSource = new MatTableDataSource(result);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
   });
   }
   applyFilter(filterValue: string) {
    filterValue = filterValue.trim();
    filterValue = filterValue.toLowerCase();
     this.dataSource.filter = filterValue;
   }
  handleClick(event: Event) {
   console.log('‘Click’', event);
  }
}

AVAILABLE-COURSES.HTML`

 </div>
 <mat-table [dataSource]="dataSource" class="courses">
 <ng-container matColumnDef="id">
 <mat-header-cell *matHeaderCellDef> Id </mat-header-cell>
 <mat-cell *matCellDef="let courseEnrolments"> {{courseEnrolments.id}} </mat-   cell>
</ng-container>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef> Course Name </mat-header-cell>
<mat-cell *matCellDef="let courseEnrolments"> {{courseEnrolments.name}}        </mat-cell>
 </ng-container>
 <ng-container matColumnDef="description">
  <mat-header-cell *matHeaderCellDef> Description </mat-header-cell>
  <mat-cell *matCellDef="let courseEnrolments">    {{    courseEnrolments.description}} </mat-cell>
</ng-container>
<ng-container matColumnDef="other">
 <mat-header-cell *matHeaderCellDef> Other informations </mat-header-cell>
 <mat-cell *matCellDef="let courseEnrolments"> {{courseEnrolments.other}}  </mat-cell>
 </ng-container>
 <ng-container matColumnDef="checked">
  <mat-header-cell *matHeaderCellDef>Enlist</mat-header-cell>
  <mat-cell *matCellDef="let courseEnrolments">
    <button  (click)="handleClick($event)"_ngcontent-c54="" color="primary"    mat-stroked-button="" class="mat-stroked-button mat-primary"><span
      class="mat-button-wrapper">Enlist</span>
     <div class="mat-button-ripple mat-ripple" matripple=""></div>
     <div class="mat-button-focus-overlay"></div>
   </button>
  </mat-cell>

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

Answer 1

ниже приведен пример кода:

 <tr mat-row (click)="selectRow(mytemplate, row)" *matRowDef="let row; columns: 
  displayedColumns;"></tr>

Для получения дополнительной информации, пожалуйста, проверьте: получить идентификатор строки при щелчке строки угловой

Answer 2

Вы можете получить идентификатор следующим образом:

 <button  (click)="handleClick(courseEnrolments.id)"_ngcontent-c54="" color="primary"    mat-stroked-button="" class="mat-stroked-button mat-primary"><span
  class="mat-button-wrapper">Enlist</span>
  <div class="mat-button-ripple mat-ripple" matripple=""></div>
  <div class="mat-button-focus-overlay"></div>
</button>