Как отключить событие щелчка в теге span - Angular 6

#javascript #css #angular #html-table

#javascript #css — код #angular #html-таблица

Вопрос:

Я хочу отключить на основе условия событие щелчка, которое «удаляет часы» с символом «X». Заранее благодарю.

 <table navigatable class="<some_class>">
    <tbody>
        <tr *ngFor="let item of list; let i=index">
            <td style="width: 95%">{{item}}</td>
            <td style="width: 5%">
                <span class="<some_class>" (click)="DeleteHour(i)">X</span>
            </td>
        </tr>
    </tbody>
</table>

1. «… отключите визуальное отображение строк этой таблицы». Что это значит?

2. @Marc Я имею в виду отключить с помощью CSS, потому что это не элемент ввода.

3. Вы только что повторили ту часть, которая сбивает с толку …. и / или усилили путаницу. «… отключить с помощью CSS …». Что это значит? Как будет выглядеть это конечное состояние? Вы уже заявили, что это не элемент ввода, поэтому он не соблюдает disabled атрибут. Поэтому вам нужно «изобрести» поведение и внешний вид вашего отключенного состояния. Это то, что я хочу сказать, и то, что вы не прояснили.

4. Я думаю, ты прав @Marc. Итак, я удалю эту часть своего вопроса.

Ответ №1:

Я думаю, вы можете использовать «ранний возврат» в DeleteHour (i), чтобы отключить действие.

 const DeleteHour = (i) => {
  if (isDisabled(list[i])) return;
  // ...rest of the function
}

Что касается части «отключить визуально», я думаю, это похоже на изменение чего-то визуального, если оно отключено. Если да, вы можете сделать что-то вроде этого :

 <span class="<some_class>" (click)="DeleteHour(i)">{{ isDisabled(item) ? '🚫' : 'X' }}</span>

Вы можете (и, возможно, должны вместо этого) также использовать кнопку и использовать псевдокласс css delete-hour:disabled { ...styles } :

 <button class="delete-hour" (click)="DeleteHour(i)" [disabled]="isDisabled(item)">X</button>

Ответ №2:

попробуйте это: (Я также изменил некоторый код в вашем html)

 function DeleteHour(e){
e.parentNode.style.display = "none";
  e.parentNode.previousElementSibling.style.display="none";
}

 <table navigatable class="<some_class>">
    <tbody>
        <tr *ngFor="let item of list; let i=index">
            <td style="width: 95%">{{item}}</td>
            <td style="width: 5%">
                <span class="<some_class>" onclick="DeleteHour(this)">X</span>
              
                          <td style="width: 95%">{{item}}</td>
            <td style="width: 5%">
                <span class="<some_class>" onclick="DeleteHour(this)">X</span>
              
                          <td style="width: 95%">{{item}}</td>
            <td style="width: 5%">
                <span class="<some_class>" onclick="DeleteHour(this)">X</span>
            </td>
        </tr>
    </tbody>
</table>

Развернуть фрагмент