Таблица изменения стиля элементов строки - PullRequest
0 голосов
/ 22 апреля 2020

У меня есть таблица с флажком и несколько текстовых столбцов.

Предполагается, что она выглядит следующим образом:

Таблица с флажком

При флажке проверенный текст должен стать ударным желобом. Если флажок не отмечен, текст не наносится.

Я пробовал это: Html код:

<td style="width: 100px;">
      <div class="form-check">
        <input
          #cbs
          class="form-check-input"
          type="checkbox"
          (change)="onChange(element, $event)"
          [checked]="isChacked(element.buyed)"
          id="defaultCheck1"
        />
      </div>
    </td>
    <td>
      <ng-template #nechekiranoIN>
        Naziv: <strong>{{ element.itemName }}</strong
        ><br />
        Kategorija: <span>{{ element.categoryName }}</span
        ><br />
        <div *ngIf="element.note !== ''">
          Napomena:
          <span>{{ element.note }}</span>
        </div>
      </ng-template>
      <div *ngIf="cbs.checked; else nechekiranoIN">
        Naziv:
        <strong style="text-decoration: line-through;">{{
          element.itemName
        }}</strong
        ><br />
        Kategorija:
        <span style="text-decoration: line-through;">{{
          element.categoryName
        }}</span
        ><br />
        <div *ngIf="element.note !== ''">
          Napomena:
          <span style="text-decoration: line-through;">{{
            element.note
          }}</span>
        </div>
      </div>
    </td>
    <td>
      <ng-template #nechekiranoIQ>
        <p>
          {{ element.itemQty }}
        </p></ng-template
      >
      <ng-container *ngIf="cbs.checked; else nechekiranoIQ">
        <span style="text-decoration: line-through;">
          {{ element.itemQty }}
        </span>
      </ng-container>
    </td>

Машинопись:

isChacked(num: number): boolean {
if (num === 1) {
  return true;
} else return false;

}

Html код над зачеркнутым текстом, когда флажок установлен, но при первом отображении таблицы текст не зачеркнут.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...