Question

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

在我的 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>

If I click on the right arrow, it should changes to down arrow

However, every row got changed.

Answer 1

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

Example

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>

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

1 个答案: