Question

这是我的表格的HTML代码，用于显示用户列表：

<table class="table m-table m-table--head-bg-metal">
<thead>
    <tr>
        <th>
            Nom
        </th>
        <th>
            Prénom
        </th>
        <th>
            Email
        </th>
        <th>
            Action
        </th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            Jhon
        </td>
        <td>
            Stone
        </td>
        <td>
            jhonStone@gmail.com
        </td>
        <td>
            <button class="btn btn-outline-danger m-btn m-btn--icon btn-sm m-btn--icon-only m-btn--pill m-btn--air" (click)="onDisableUser()">
                <i class="fa fa-close"></i>
            </button>
        </td>
    </tr>

</tbody>

这是打字稿方法：

onDisableUser(){
//this is the method to disable the table row..
}

我想要的是当我点击操作按钮上的（）时，表格行将禁用。

提前致谢。

Answer 1

禁用是什么意思？如果要删除列表项，请在html上执行此操作：

<table class="table m-table m-table--head-bg-metal">
    <thead>
        <tr>
            <th>
                Nom
            </th>
            <th>
                Prénom
            </th>
            <th>
                Email
            </th>
            <th>
                Action
            </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngIf="!isDisable">
            <td>
                Jhon
            </td>
            <td>
                Stone
            </td>
            <td>
                jhonStone@gmail.com
            </td>
            <td>
                <button class="btn btn-outline-danger m-btn m-btn--icon btn-sm m-btn--icon-only m-btn--pill m-btn--air" (click)="onDisableUser()">
        <i class="fa fa-close"></i>
       </button>
            </td>
        </tr>
    </tbody>
</table>

关于打字稿：

  isDisable = false;

  onDisableUser(){
    this.isDisable = true;
}

如果你想用css禁用它，请在html中使用它：

<tr [ngClass]="{'disabled': isDisable}>

Answer 2

您可以使用css方法禁用表格行。单击时将禁用设置为true，并将类设置为<tr> if disabled=true

.disable{
  cursor: not-allowed;
  }

<table>

<tr class="disable">
  <td> akjsd </td>
</tr>

<tr >
  <td> akjsd </td>
</tr>

</table>

  isDisable = false;

  onDisableUser(){
    this.isDisable = true;
}

Angular 5禁用表行

2 个答案: