首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >单击行时不触发mat-table操作

单击行时不触发mat-table操作
EN

Stack Overflow用户
提问于 2018-01-18 03:32:09
回答 1查看 327关注 0票数 0

我是angular的新手,正在尝试使用mat tables的一些功能。虽然我已经完成了我需要做的大部分工作,但当我单击一行时,我无法触发任何操作。我对此功能的测试是删除单击的行。我真正想要的是显示另一个组件,但我还没有开始这样做,所以删除提供了一个明确的信号,即点击是为正确的行触发的。

如下表所示:

代码语言:javascript
复制
<mat-table #table [dataSource]="dataSource" matSort>
  <ng-container matColumnDef="title">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Part Name</mat-header-cell>
    <mat-cell *matCellDef="let part"> {{ part.title }}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="partNumber">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Part Number</mat-header-cell>
    <mat-cell *matCellDef="let part"> {{ part.partNumber }}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="description">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Description</mat-header-cell>
    <mat-cell *matCellDef="let part"> {{ part.description }}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="leadTime">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Lead Time</mat-header-cell>
    <mat-cell *matCellDef="let part"> {{ part.leadTime }}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="weight">
    <mat-header-cell *matHeaderCellDef mat-sort-header> Weight</mat-header-cell>
    <mat-cell *matCellDef="let part"> {{ part.weight }}</mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;" click="displayDetail(row._id)"></mat-row>

</mat-table>

它在我的组件文件中触发以下事件:

代码语言:javascript
复制
partList: Array<Part> = new Array<Part>();
dataSource = new MatTableDataSource(this.partList);

displayDetail(i) {
   this.partList.splice(i, 1);
}

我已经摆弄了很多东西,几乎做了我能想到的所有事情,但我觉得我对angular的经验不足导致我忽略了一些简单的东西。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-01-18 23:52:58

回答这个问题,以防其他人有类似的问题。

我在代码中遇到了一些问题,但这是现在可以工作的代码块:

代码语言:javascript
复制
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;" 
     (click)="displayDetail(row.partNumber)"></mat-row>

这确定了几个问题。click应该包含在括号中(我不确定这是一个问题,但它是导致它工作的步骤的一部分)。

真正的问题是row对象。我所引用的示例在它的mat列集合中有一个_id字段。这个row对象不是特定于mat的对象,而只是表示来自数据源的数据的对象(我的理解错误是它是特定于mat表的对象)。因此,它只包含您从数据源提供给它的行/数据。如果我的数据中有id字段,我可以通过id来调用它。因为它没有,我没有得到有效的信息。

我将其更改为在需要传递给下一个组件的数据中返回唯一标识符。一切都很好。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/48308648

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档