Angular 5 отключить строку таблицы

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

Вы можете использовать метод css для отключения строки таблицы.При отключении установите для параметра true значение true и установите для класса <tr>, если 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;
}

Answer 2

Что вы имеете в виду с отключением? Если вы хотите удалить элемент списка, сделайте это на 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}>