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

Question

实际上我已经使用数据表通过 jquery 库以角度显示数据。

用户将搜索名称并假设如果输出出现，该用户将单击数据表的主体，我想在 console.log() 中显示这个单一的 JSON 数据。如何获得这种方法？

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();
      });
  }


}

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">
         <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

您可以编写一个在单击该行时触发的函数。

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

在你的js中，

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

Answer 2

在 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>

组件.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
    }


}

注意： 避免在 Angular 中使用 jquery。 因为 Angular 有它的 on 事件。

如果您想要纯角度数据表，请使用来自https://www.npmjs.com/package/ngx-datatable 的 ngx-datatable。

Answer 3

您可以处理点击并从那里获取数据。

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' );
      });
    });
  }
}