时间戳

首页 > 解决方案 > 关于在垫子上切换按钮的问题

angular - 关于在垫子上切换按钮的问题

问题描述

如何更改仅单击的行上的按钮？

在我的 ts 文件中：箭头 = 'fa fa-caret-right fa-lg';

toggleArrow() {
  if (this.arrow === 'fa fa-caret-right fa-lg') {
    this.arrow = 'fa fa-sort-desc fa-lg';
  } else {
  this.arrow = 'fa fa-caret-right fa-lg';
  }
}

在我的 html 文件中，这就是我定义操作列的方式：

<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef>Actions</th>
<td mat-cell *matCellDef="let element">
<!--edit button-->
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="fa fa-pencil-square-o fa-lg" aria-hidden="true"></span>
</button>
<!-- arrow button-->
<button type="button" class="btn btn-default" aria-label="Left Align"
(click)="toggleArrow()">
<span class="{{arrow}}" aria-hidden="true"></span>
</button>
</td>
</ng-container>

如果我单击右箭头，它应该变为向下箭头

然而，每一行都改变了。

标签： angularangular-material

解决方案

更好的解决方案是存储您单击的元素的 id，然后如果存储的 id 与显示的元素或相应的图标相同，请参阅此处您有一个带有材质图标的示例，但逻辑是相同的对于你的情况。

例子

elementId: number;

toggleArrow(id: number) {
  if (id === this.elementId) {
    this.elementId = null;
  } else {
    this.elementId = id;
  }
}


<ng-container matColumnDef="actions">
   <th mat-header-cell *matHeaderCellDef>Actions</th>
   <td mat-cell *matCellDef="let element">
     <!--edit button-->
     <button type="button" class="btn btn-default" aria-label="Left Align">
        <span class="fa fa-pencil-square-o fa-lg" aria-hidden="true"></span>
     </button>
     <!-- arrow button-->
    <button type="button" class="btn btn-default" aria-label="Left Align"
           (click)="toggleArrow()">
       <span  [ngClass]="{
                         'fa fa-sort-desc fa-lg': element.id === elementId,
                         'fa fa-caret-right fa-lg': element.id !== elementId}" 
            aria-hidden="true"> 
      </span>
    </button>
   </td>
</ng-container>

推荐阅读