对按钮列表使用 clrLoading

Question

我正在使用 VMWare Clarity 数据网格，其中一列有一个按钮。我希望当我点击一个按钮时，那个按钮有微调器，但其他按钮没有。我怎样才能设法隔离这种行为？

  <clr-datagrid [clDgRowSelection]="true" [(clrDgSingleSelected)]="itemSelected">

    <clr-dg-column>Title</clr-dg-column>
    <clr-dg-column>&nbsp;</clr-dg-column>

    <clr-dg-row *clrDgItems="let item of items; trackBy: trackById" [clrDgItem]="item">
      <clr-dg-cell>{{ item.name }}</clr-dg-cell>
      <clr-dg-cell>
        <button [clrLoading]="resetState" type="button" class="btn btn-sm" (click)="resetItem(item)"</clr-dg-cell>
    </clr-dg-row>

  </clr-datagrid>

谢谢

Answer 1

您需要做的就是让您拥有每个项目的"loading"状态。重置时 item.resetState 可能是 true，或者您可以将 resetState 变成地图而不是简单的布尔值。

例如，我提到的第二个解决方案如下所示：

<button [clrLoading]="resetState[item.id]" (click)="resetItem(item)">

其中 resetItem(item) 进行重置并设置 resetState[item.id] = true，同时等待它完成。

对按钮列表使用 clrLoading

Using clrLoading for a list of buttons

angular

vmware-clarity