Question

我有角材料制成的垫子桌子组件。我填充它，我想检索所选行的ID。在每一行中，我都放置了一个按钮，希望通过该按钮获得该ID。我在下面放上image of mat-table的图片。在“ 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

您可以通过以下方式检索ID：

 <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>

Answer 2

您可以在下面的示例代码中：

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

有关更多信息，请检查：get row id on row click angular

无法使用角度为7的mat-table的每一行中的按钮检索所选行的id

2 个答案: