我如何使用 jQuery 在 angular 9 中针对 ngFor 循环的特定迭代？

Question

I have a list of items inside a modal implemented using *ngFor with check boxes. the objective is to strike out contents of item when checkbox is clicked.

initial code: jQuery in home.component.ts

  $('body').on('click','#Check',function(){
    if($(this).is(":checked")) {
       $('.note').addClass('line-thr');
  
    } else {
       $('.note').removeClass('line-thr')
      } 
   }

);

home.component.html:

       <div class="form-check d-flex" *ngFor= 'let note of notes; let i = index'> 
          <input type="checkbox" class="form-check-input" value="supress" id="Check">
          <div class="check-label note " id="{{i}>
                {{note.text}}
                <div class="float-right note">
                     {{note.date}}
                </div>
          </div>
        </div>

The problem that occurs is when clicking on any checkbox, it adds class .line-thr to whole list. BUT I ONLY NEED TO STRIKE OUT THE ELEMENTS IN THAT PARTICULAR ITEM.

The solution could be to use an index number to make a different id for every list item, but I am not sure how to use this variable id in Javascript.

Answer 1

Using JQuery within angular will be a constant and sizeable challenge for you... it is advisable to avoid it.

You could do it in angular (without JQuery)

<input type="checkbox" class="form-check-input" value="supress" id="Check" (click)="noteClicked($event, note)">
<div class="check-label note " id="{{i}" [ngClass]="{'line-thr': note.checked}">
  {{note.text}}
  <div class="float-right note">
    {{note.date}}
  </div>
</div>

and in your component

    noteClicked($event, note) {
        note.checked = $event.currentTarget.checked;
    }

Click here for Working example

Answer 2

You can do that even without adding any extra function in the ts file. Also, you do not need jQuery.

1. Add a new boolean field with the note object such as "checked".

2. In your HTML, bind this field with the checkbox

   <input type="checkbox" [checked]="note.checked" class="form-check-input" id="Check">

3. Add dynamic css classes to your div element based on that "checked" boolean field of the note object. <div class="note" [ngClass]="{'line-thr': note.checked}" .....>