Typescript PrimeNG的数据表未触发onRowSelect事件

Typescript PrimeNG的数据表未触发onRowSelect事件,typescript,angular,primeng,Typescript,Angular,Primeng,我目前正在测试priming并尝试使用数据表。除了活动之外,一切都很顺利。我试图使用咆哮来显示一条消息,当一行被选中时,就像PrimeNG网站上的事件演示一样。 我目前有: import { Component, OnInit, EventEmitter } from '@angular/core'; import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; import { DataTable, Column, Schedule, G

我目前正在测试priming并尝试使用数据表。除了活动之外,一切都很顺利。我试图使用咆哮来显示一条消息,当一行被选中时,就像PrimeNG网站上的事件演示一样。 我目前有:

import { Component, OnInit, EventEmitter } from '@angular/core';
import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
import { DataTable, Column, Schedule, Growl, Message } from 'primeng/primeng';
import { NameListService } from '../shared/index';

@Component({
  moduleId: module.id,
  selector: 'dash',
  templateUrl: 'dashboard.component.html',
  styleUrls: ['dashboard.component.css'],
  directives: [REACTIVE_FORM_DIRECTIVES, DataTable, Column, Schedule]
})
export class DashboardComponent implements OnInit {

  newName:string = '';
  newLanguage:string = '';
  errorMessage:string;
  names:any[] = [];
  selectedName:any;
  events:any[];
  cols:any[];
  msgs:Message[] = [];

  constructor(public nameListService:NameListService) {
  }

  ngOnInit() {
    this.getNames();
    this.cols = [
      {field: 'id', header: 'ID'},
      {field: 'name', header: 'Name'},
      {field: 'language', header: 'Language'}
    ];
}

  onRowSelect(event) {
    this.msgs = [];
    this.msgs.push({severity: 'info', summary: 'Selected', 
    detail:event.data.name + ' - ' + event.data.language});
}

  getNames() {
    this.nameListService.get()
      .subscribe(
        names => this.names = names,
    error =>  this.errorMessage = <any>error
);
  }

  addName():boolean {
    this.names.push({"name": this.newName, 
    "language": this.newLanguage});
    this.newName = '';
    this.newLanguage = '';
    return false;
  }

}
仪表板组件模板如下所示:

<p-growl [value]="msgs"></p-growl>

<form (submit)="addName()" style="margin-bottom:10px;">
  <label>Name:</label>
  <input class="form-control" [(ngModel)]="newName" name="newName" 
     placeholder="Enter new name..."
     style="margin-bottom: 10px;">
  <label>Language:</label>
  <input class="form-control" [(ngModel)]="newLanguage" 
     name="newLanguage" placeholder="Enter new language..."
     style="margin-bottom: 10px;">
  <button class="btn btn-primary" type="submit" 
         *ngIf="newName && newLanguage"><i class="fa fa-plus"></i> Add</button>
</form>

<p-dataTable [value]="names" [(selection)]="selectedName" 
    selectionMode="single">
    <p-column *ngFor="let col of cols" [field]="col.field" 
               [header]="col.header">
    </p-column>
</p-dataTable>

<div *ngIf="selectedName">
  <label>Selected person name:</label><br/>
  <input class="form-control" [(ngModel)]="selectedName? selectedName.name: none" 
     readonly style="margin-bottom: 10px;"/><br/>
  <label>Selected person programming language:</label><br/>
  <input class="form-control" 
     [(ngModel)]="selectedName? selectedName.language: none" 
     readonly style="margin-bottom: 10px;"/><br/>
  <label>Selected person birth year:</label><br/>
  <input class="form-control" 
     [(ngModel)]="selectedName? selectedName.birthYear: none" readonly/>
</div>

但是,当我选择一行时,事件不会触发。它不会在断点处停止,因此根本不会注册它。是否有解决方案或建议来解决此问题?

看起来您忘记指定selectionMode:

在哪里

onRowSelect—数据表组件中事件的名称 onRowSelect$event—组件中方法的名称
您必须在app.module.ts中导入FormsModule

import { FormsModule } from '@angular/forms';

我找不到一个你使用rowselect方法的地方。检查我的答案
(onRowSelect)="onRowSelect($event)"
import { FormsModule } from '@angular/forms';