Mat Table:-如何在 Mat table angular 中单击按钮获取特定行的一个特定元素？

Question

这是我的 Datatable.component.html 我想获取一行中的一个特定项目，比如说 Table 中用户的 "email" .我该怎么做？

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<div class="search-div">
  <button mat-raised-button routerLink="/auth/signup">
    <mat-icon>add</mat-icon>Create
  </button>
  <mat-form-field class="search-form-field" floatLabel="never">
    <input matInput [(ngModel)]="searchKey" placeholder="Search" autocomplete="off" (keyup)="applyFilter()">
    <button mat-button matSuffix mat-icon-button aria-label="Clear"*ngIf="searchKey"  (click)="onSearchClear()">
      <mat-icon>close</mat-icon>
    </button>
  </mat-form-field>
</div>
<div class="mat-elevation-z8">
  <mat-table [dataSource]="listData"  matSort>
    <ng-container matColumnDef="firstName">
      <mat-header-cell *matHeaderCellDef  mat-sort-header>Full Name</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.firstName}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef  mat-sort-header>Email</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.email}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="mobile">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Mobile</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.phoneNum}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="city">
      <mat-header-cell *matHeaderCellDef mat-sort-header>City</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.city}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="LastName">
      <mat-header-cell *matHeaderCellDef mat-sort-header>LastName</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.lastName}}</mat-cell>
    </ng-container>
     <ng-container matColumnDef="actions">
      <mat-header-cell *matHeaderCellDef></mat-header-cell>
      <mat-cell *matCellDef="let row">
        <button mat-icon-button (click)="onEdit(row)"><mat-icon>launch</mat-icon></button>
        <button mat-icon-button color="warn" (click)="ondisbale(userId)"><mat-icon>delete_outline</mat-icon></button>
      </mat-cell>
</ng-container>
    <ng-container matColumnDef="loading">
      <mat-footer-cell *matFooterCellDef colspan="6">
        Loading data...
      </mat-footer-cell>
    </ng-container>
    <ng-container matColumnDef="noData">
      <mat-footer-cell *matFooterCellDef colspan="6">
        No data.
      </mat-footer-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    <mat-footer-row *matFooterRowDef="['loading']" [ngClass]="{'hide':listData!=null}"></mat-footer-row>
    <mat-footer-row *matFooterRowDef="['noData']" [ngClass]="{'hide':!(listData!=null && listData.data.length==0)}"></mat-footer-row>
  </mat-table>
  <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="5" showFirstLastButtons></mat-paginator>
</div>
<div class="container-fluid" style="position: fixed; bottom: 0px;background-color:ivory; padding:1rem; border-top-left-radius: 2rem; border-top-right-radius: 2rem;">
        <div class="row justify-content-center">
          <i class="fab fa-facebook-f" style="margin-right: 10px;"></i>
          <i class="fab fa-instagram" style="margin-right: 10px;margin-left: 10px; color: orchid"></i>
          <i class="fab fa-twitter" style="margin-right: 10px;margin-left: 10px; color: royalblue"></i>
          <i class="fab fa-reddit" style="margin-right: 10px;margin-left: 10px; color:orangered;"></i>
        </div>
        <div class="row justify-content-center" style="margin-top: 20px;">
          Copyright @2019 All rights reserved
        </div>
      </div>

我不知道如何获取 it.Basically 我添加了按钮 Delete_outline。现在单击它我想收到我单击的特定行的电子邮件？

Answer 1

您的 row 对象将包含该特定行的值。您可以通过将电子邮件从 row 传递到 delete_outline 按钮的 (click) 事件上的 ondisable() 函数来发送电子邮件。

<button mat-icon-button color="warn" (click)="ondisable(row.email)"><mat-icon>delete_outline</mat-icon></button>

Mat Table:-如何在 Mat table angular 中单击按钮获取特定行的一个特定元素？

Mat Table:-How to get one particular element of a particular row on a button click in Mat table angular?

angular-material

angular

mat-table