angular - Mat Table:-如何在 Mat table angular 中单击按钮获取特定行的一个特定元素?
问题描述
这是我的Datatable.component.html我想获取一行中的一个特定项目,比如说表中用户的“电子邮件”。我怎么能做到这一点?
<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>
我不知道如何获取它。基本上我添加了Delete_outline按钮。现在点击它我想获得我点击的特定行的电子邮件?
解决方案
您的row
对象将包含该特定行的值。您可以通过在按钮事件上将电子邮件传递row
给ondisable()
函数来发送电子邮件。(click)
delete_outline
<button mat-icon-button color="warn" (click)="ondisable(row.email)"><mat-icon>delete_outline</mat-icon></button>
推荐阅读
- excel - 具有两个值的 Excel sumifs 引发错误
- html - 表格中的响应式表格 - HTML 电子邮件
- java - 添加带有豆子的外部罐子(战争之外)
- java - @ModelAttribute 字段变为空?
- python - Waitress 如何处理并发任务?
- thunderbird-addon - Thunderbird 68.4.1:如何检查邮件是否被标记为“垃圾邮件”?
- python - 在 Linux 上将 Spyder 与 Python 2.7 和 Python 3 一起使用
- sqlite - 查询以在整个表上搜索关键字
- r - 使用 lapply 将单个数据框列转换为数据框列表中的数字
- asynchronous - ZeroMQ异步http请求和消息的区别?