首页 文章

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

提问于
浏览
0

我对角度很新,并试图利用mat表的一些功能 . 虽然我完成了大部分工作,但是当我点击一行时,我无法触发任何动作 . 我对此功能的测试是删除单击的行 . 我真正想要的是显示另一个组件,但我还没有开始,所以删除提供了一个明确的信号,即点击正在为正确的行触发 .

表格如下:

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

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

partList: Array<Part> = new Array<Part>();
dataSource = new MatTableDataSource(this.partList);

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

我已经搞砸了很多碎片并完成了我能想到的一切,但我觉得我对角度的缺乏经验让我忽略了一些简单的事情 .

1 回答

  • 0

    如果其他人有类似的问题,请回答这个问题 .

    我的代码有一些问题,但这是现在正在运行的代码块:

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

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

    真正的问题是行对象 . 我从中获取的示例在其mat列集中有一个_id字段 . 这个行对象不是特定于mat的东西,而只是一个表示来自数据源的数据的对象(理解我的错误是它是mat表特有的东西) . 因此,它只包含您从数据源提供的行/数据 . 如果我的数据中有一个id字段,我可以通过id调用它 . 但事实并非如此,我没有得到有效的信息 .

    我更改了它以返回我需要传递给下一个组件的数据中的唯一标识符 . 一切都很好 .

相关问题