如何捕获primeng p-dataTable的选定行？

Question

Can someone help provide info on how to capture the selected row data into a variable in my component? I am getting these parse errors.

Do I need and @Input or in the .ts file? What do I need to do the p-template for the rowdata?

I have an expander and I have a column select for the search magnifying glass icon, but I need to capture the row for the company. I am trying to use onRowSelect, but it doesn't seem to get activated. It would be nice if the row highlighted on selection.

Error: Template parse errors: Can't bind to 'selectedCompany' since it isn't a known property of 'tr'.

  (" <ng-template pTemplate="body" let-rowData let-columns="columns"> <tr [ERROR ->][selectedCompany]="rowData"> <td *ngFor="let col of columns"> "): ng:///AppModule/CompanyComponent.html@39:20 

This is my company-component.html:

<div class="row">
<div class="col-md-12">

    <p-dataTable [value]="companys" [rows]="10" expandableRows="true" [paginator]="true" [responsive]="true" selectionMode="single"
        [(selection)]="selectedCompany">
        <p-header>
            <b>Companies</b>
        </p-header>
        <p-column expander="true" styleClass="col-icon" [style]="{'width': '30px'}"></p-column>
        <p-column field="id" header="ID" [sortable]="true" [style]="{'width': '3%'}"></p-column>
        <!-- <p-column field="company.id" header="Company ID" [sortable]="true" [style]="{'width': '10%'}"></p-column> -->
        <p-column field="email" header="Email" [sortable]="true"></p-column>
        <p-column field="companyName" header="Company Name" [sortable]="true"></p-column>
        <p-column field="webSite" header="Web Site" [sortable]="true"></p-column>
        <p-column field="phone" header="Phone" [sortable]="true"></p-column>
        <!-- <p-column field="notes" header="Notes" [sortable]="true"></p-column> -->

         <p-column field="products" header="Products" [sortable]="false" [filter]="false" [style]="{'width': '100px'}">
            <ng-template let-row="rowData" pTemplate type="body">
                <span class="fa fa-search fa-15" (click)="routeToProducts(row)">
                    <span class="sr-only">View Our Products</span>
                </span>
            </ng-template>
        </p-column>
        <ng-template let-company pTemplate="rowexpansion">
                <div class="p-grid p-dir-col">
                    <div class="p-col p-col-align-start"><b>Notes: </b>{{ company.notes }}</div>

                    <div class="p-col p-col-align-start"><b>Record created date: </b>{{ company.createdDate | date }}</div>
                    <div class="p-col p-col-align-start"><b>Record created by: </b>{{ company.createdBy }}</div>
                    <div class="p-col p-col-align-start"><b>Record last updated: </b>{{ company.updatedDate | date }}</div>
                    <div class="p-col p-col-align-start"><b>Record last updated by: </b>{{ company.updatedBy }}</div>                
                </div>
        </ng-template>

        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr [selectedCompany]="rowData">
                <td *ngFor="let col of columns">
                    {{rowData[col.field]}}
                </td>
            </tr>
        </ng-template>

    </p-dataTable>
    <!-- <div class="row">
        <button type="button" class="btn btn-primary btn-sm pull-right" style="margin-right:0px; margin-top:5px; margin-bottom:5px"
            (click)="addAuthor()">Add Author</button>
    </div> -->
</div>

This is my company-component.ts:

    import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Company } from 'src/app/models/company.model';
import { CompanyStore } from 'src/app/stores/company-store';
import { Product } from 'src/app/models/product.model';
import { AppMenu } from 'src/app/models/app-menu.model';
import { AppMenuService } from 'src/app/services/app-menu.service';

@Component({
  selector: 'app-company',
  templateUrl: './company.component.html',
  styleUrls: ['./company.component.css']
})
export class CompanyComponent implements OnInit {
  appMenu: AppMenu;
  companys: Company[];
  @Output() recordId = new EventEmitter<number>();

  originalId: number;
  selectedCompany: Company = {
    id: null,
    email: '',
    companyName: '',
    webSite: '',
    phone: '',
    notes: '',
    createdBy: '',
    createdDate: null,
    updatedBy: '',
    updatedDate: null,
    products: null
  };

  @Input() set company(value: Company) {
    if (value) {
      this.originalId = value.id;
    }
    this.selectedCompany = Object.assign({}, value);
  }
  // @Input() pSelectableRow: Company;

  constructor(
    private companyStore: CompanyStore,
    private appMenuService: AppMenuService) {
    this.companyStore.init();
  }

  ngOnInit() {
    this.appMenuService.currentAppMenu$.subscribe(appMenu => this.appMenu = appMenu);

    console.log("id=" + this.appMenu.id);
    console.log("screenName=" + this.appMenu.screenName);
    console.log("url" + this.appMenu.url);

    this.appMenu.id = 3;
    this.appMenu.screenName = "companyScreen";
    this.appMenu.url = "/company.component";
    this.appMenuService.setAppMenu(this.appMenu);

    console.log("id=" + this.appMenu.id);
    console.log("screenName=" + this.appMenu.screenName);
    console.log("url=" + this.appMenu.url);
    this.companyStore.getAll$().subscribe(companys => { this.companys = companys; })
  }

  routeToProducts(company: Company): void {
    this.selectedCompany = company;

    console.log('routeToProducts(): called...');
    console.log("selectedCompany.id=" + this.selectedCompany.id);
    var products: Product[] = company.products;
    for (var i in products) {
      console.log("ID=" + products[i].id)
      console.log("ASIN=" + products[i].asin)
    }
    // this.store.dispatch({ type: 'SELECT_AUTHOR', payload: this.selectedAuthor });
    // this.router.navigate(['/home/authors/detail']);
  }

  onRowSelect(event) {
    // this.messageService.add({severity:'info', summary:'Car Selected', detail:'Vin: ' + event.data.vin});
    console.log("onRowSelect(): called...");
  }
}

Answer 1

The answer is the (onRowSelect) so that the onRowSelect() gets called.

    <p-dataTable [value]="companys" [rows]="10" expandableRows="true" [paginator]="true" [responsive]="true" selectionMode="single"
        [(selection)]="selectedCompany" (onRowSelect)="onRowSelect($event)">