单击有角对象时如何从数据表中检索单个对象？

Question

Actually i have used datatable to show the data in angular using jquery libraries.

The user will search the name and suppose if the output comes this user will click on the body of datatable and i want to show this single JSON data in console.log(). How to get this approach?

component.ts file

export class ProcessAssessmentComponent implements OnInit {

selections: Observable<Selection[]>;
dataTable: any;
clients: any[];


  constructor(private http: HttpClient,private selectionService: SelectionService,private processAssesstmentService:ProcessAssesstmentService,private chRef: ChangeDetectorRef) { }

  ngOnInit() {
     this.http.get('http://localhost:8080/api/selections')
      .subscribe((data: any[]) => {
        this.clients = data;


        this.chRef.detectChanges();

        // Now you can use jQuery DataTables :
        const table: any = $('table');
        this.dataTable = table.DataTable();
      });
  }


}

component.html file

<table class="table table-bodered">

    <thead>
      <tr>
        <th>Mag No</th>
    <th>SelectionDate</th>
  <th> SelectedBy</th>
    <th>PanEximNumber</th>
    <th>Name</th>
    <th>Address</th>
    <th>PhoneNumber</th>
    <th>SelectionType</th>


      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let client of clients">
         <td>{{client.selectionId}}</td>
    <td>{{client.selectionDate}}</td>
  <td>{{client.selectedBy}}</td>
    <td>{{client.panEximNumber}}</td>
    <td>{{client.name}}</td>
    <td>{{client.address}}</td>
    <td>{{client.phoneNumber}}</td>
    <td>{{client.selectionType}}</td>


      </tr>


    </tbody>

  </table>

Answer 1

use (click) event on tr:

component.html

        <table class="table table-bodered">

    <thead>
      <tr>
        <th>Mag No</th>
    <th>SelectionDate</th>
  <th> SelectedBy</th>
    <th>PanEximNumber</th>
    <th>Name</th>
    <th>Address</th>
    <th>PhoneNumber</th>
    <th>SelectionType</th>


      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let client of clients" (click)="selectedRow(client)">
         <td>{{client.selectionId}}</td>
    <td>{{client.selectionDate}}</td>
  <td>{{client.selectedBy}}</td>
    <td>{{client.panEximNumber}}</td>
    <td>{{client.name}}</td>
    <td>{{client.address}}</td>
    <td>{{client.phoneNumber}}</td>
    <td>{{client.selectionType}}</td>


      </tr>


    </tbody>

  </table>

component.ts

export class ProcessAssessmentComponent implements OnInit {

selections: Observable<Selection[]>;
dataTable: any;
clients: any[];


  constructor(private http: HttpClient,private selectionService: SelectionService,private processAssesstmentService:ProcessAssesstmentService,private chRef: ChangeDetectorRef) { }

  ngOnInit() {
     this.http.get('http://localhost:8080/api/selections')
      .subscribe((data: any[]) => {
        this.clients = data;


        this.chRef.detectChanges();

        // Now you can use jQuery DataTables :
        const table: any = $('table');
        this.dataTable = table.DataTable();
      });
  }

   selectedRow(client)
    {
    console.log(client); //selected row data
    }


}

Note: Avoid use of jquery in angular. because angular have its on events.

if you want pure angular datatable use ngx-datatable from https://www.npmjs.com/package/ngx-datatable .

Answer 2

You can write a function which gets triggered on clicking the row.

<tr *ngFor="let client of clients" (click)="onClick(client)">
    ...
</tr>

In your js,

onClick(client:any){
    console.log(client)
}

Answer 3

You can handle the click and get the data from there.

export class ProcessAssessmentComponent implements OnInit {

  selections: Observable<Selection[]>;
  dataTable: any;
  clients: any[];

  constructor(
    private http: HttpClient,
    private selectionService: SelectionService,
    private processAssesstmentService:ProcessAssesstmentService,
    private chRef: ChangeDetectorRef
  ) { }

  ngOnInit() {
    this.http.get('http://localhost:8080/api/selections')
    .subscribe((data: any[]) => {
      this.clients = data;

      this.chRef.detectChanges();

      // Now you can use jQuery DataTables :
      const table: any = $('table');
      this.dataTable = table.DataTable();

      $('table tbody').on('click', 'tr', function () {
          var data = table.row(this).data();
          alert( 'You clicked on '+ data[0] +'\'s row' );
      });
    });
  }
}