Question

有人可以提供有关如何将所选行数据捕获到组件中的变量中的信息吗？我收到这些解析错误。

我需要@Input还是.ts文件？我需要为行数据做p模板吗？

我有一个扩展器，并且为搜索放大镜图标选择了一个列，但是我需要捕获公司的行。我正在尝试使用onRowSelect，但是它似乎没有被激活。如果该行在选择中突出显示，那就太好了。

错误：模板解析错误：无法绑定到“ selectedCompany”，因为它不是“ 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

这是我的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>

这是我的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

答案是（onRowSelect），以便调用onRowSelect（）。

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

我该如何捕获主数据表的选定行？

1 个答案: