Question

我的问题是关于如何在特定行上添加click事件并转到带有被单击行的值的下一个表单。我现在有点困惑

        <!-- Position Column -->
        <ng-container matColumnDef="itemname">
            <th mat-header-cell *matHeaderCellDef> ITEM NAME </th>
            <td mat-cell *matCellDef="let element"> {{element.itemname}} </td>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="category">
            <th mat-header-cell *matHeaderCellDef> CATEGORY </th>
            <td mat-cell *matCellDef="let element"> {{element.category}} </td>
        </ng-container>

        <!-- Weight Column -->
        <ng-container matColumnDef="quantity">
            <th mat-header-cell *matHeaderCellDef> QUANTITY </th>
            <td mat-cell *matCellDef="let element"> {{element.quantity}} </td>
        </ng-container> 
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr class="rows" mat-row *matRowDef="let row; columns: 
         displayedColumns;"> 
        </tr>
        </table>

Answer 1

尝试像这样发送onClick值。

<ng-container matColumnDef="itemname">
     <th mat-header-cell *matHeaderCellDef> ITEM NAME </th>
     <td mat-cell *matCellDef="let element">
          <ng-container ng-click="passValue(element.itemname)"> 
          {{element.itemname}} 
          </ng-container> 
     </td>
</ng-container>

并在js代码中捕获值

  clickedValue:any;
  passValue(val:any){
      this.clickedValue = val;
      console.log(clickedVal);
  }

，然后您可以使用其他任何形式的值。请要求任何澄清。

如何为Angular Mat-Table上的行添加onClick事件，然后转到另一个页面？

1 个答案: