I want to color all the cells the match with the data I am receiving from an API when I trigger colorMatchingRecords() When I trigger the colorMatchingRecords() nothing happens on the HTML table

https://stackblitz.com/edit/angular-i5ni21?

Results: any = []
getResults() {
  this.service.getData().subscribe(res => {
    this.Results = res
  })

  // this is how the Results look like Results=[{name:'Mike',age:34,gender:'Male'}............]
}
colorMatchingRecords() {

  let first = $(' tbody tr td:nth-child(1)')
  let second = $(' tbody tr td:nth-child(2)')
  let third = $(' tbody tr td:nth-child(3)')
  this.Results.forEach(elm => {
    if (elm.name == first.text()) {
      first.addClass('match')
    }
    if (elm.gender == second.text()) {
      second.addClass('match')
    }
    if (elm.age == third.text()) {
      third.addClass('match')
    }
  });
}

.match {
  background-color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table">

  <table>
    <thead class="thead">
      <tr class="tr">
        <th class="th" scope="col">Name</th>
        <th class="th" scope="col">Gender</th>
        <th class="th" scope="col">Age</th>
    </thead>
    <tbody class="tbody" *ngFor="let el of details; even as even;x as index">
      <tr class="tr" id="{{x}}" [ngClass]="{'even': even}">
        <td class="td">{{el.name}}</td>
        <td class="td">{{el.gender}}</td>
        <td class="td">{{el.age}}</td>
      </tr>
    </tbody>
  </table>
</div>

CodePudding user response：

I would avoid completely using j-query in Angular and in general, since javascript can do most of it.

You could add a new attribute to your object, like class and then update them with your logic, when you do click on colorMatchingRecords().

Then, inside the html, you add the class into the list of class your tr have

This working StackBlitz

HTML

<div class="table">
  <table>
    <thead class="thead">
      <tr class="tr">
        <th class="th" scope="col">Name</th>
        <th class="th" scope="col">Gender</th>
        <th class="th" scope="col">Age</th>
      </tr>
    </thead>

    <tbody class="tbody" *ngFor="let el of details; even as even; x as index">
      <!-- see the {{el.class}} -->
      <tr class="tr {{ el.class }}" id="{{ x }}" [class.even]="even"> 
        <td class="td">{{ el.name }}</td>
        <td class="td">{{ el.gender }}</td>
        <td class="td">{{ el.age }}</td>
      </tr>
    </tbody>
  </table>
</div>
<button (click)="colorMatchingRecords()">Color Records</button>

ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  name = 'Angular';
  Results: any = [
    { name: 'John', age: 34, gender: 'Male' },
    { name: 'Ben', age: 50, gender: 'Male' },
    { name: 'Mike', age: 34, gender: 'Male' },
    { name: 'Seth', age: 34, gender: 'Male' },
  ];
  
  // Adding type, to make it accept `class` being unset at the beginning
  details: { name: string; age: number; gender: string; class?: string }[] = [
    { name: 'John', age: 22, gender: 'Male' },
    { name: 'Ken', age: 34, gender: 'Male' },
    { name: 'Ruth', age: 22, gender: 'Female' },
    { name: 'Seth', age: 14, gender: 'Male' },
    { name: 'Ben', age: 52, gender: 'Male' },
  ];

  colorMatchingRecords() {
    for (let index = 0; index < this.Results.length; index  ) {
      const elem = this.Results[index];

      console.log(elem, this.details[index]);
      // If the element have the same name, update add the `match` class
      this.details[index].class =
        this.details[index] && elem.name == this.details[index].name
          ? 'match'
          : '';
    }
  }
}