Таблица данных PrimeNG не срабатывает onRowSelect event

Question

В настоящее время я тестирую PrimeNG и пытаюсь использовать таблицу данных. Все работает отлично, за исключением событий. Я пытаюсь использовать Growl для отображения сообщения при выборе строки (например, демонстрации Events на веб-сайте 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> 

Однако, когда я выбираю строку событие не срабатывает. Он не останавливается в точке останова, поэтому он вообще не регистрирует его. Есть ли решение или какой-то совет относительно того, где я должен искать, чтобы исправить это?

Answer 1

Похоже, вы забыли указать selectionMode:

<p-dataTable [value]="names" selectionMode="single" (onRowSelect)="onRowSelect($event)"> 
    ...  
</p-dataTable> 

действительные значения "единого" и "множественного"

Plunker example

Update:

Также вы должны подписаться на onRowSelect событие

(onRowSelect)="onRowSelect($event)" 

где

• (onRowSelect) - название события из DataTable компонента
• onRowSelect($event) - имя метода в компоненте

Answer 2

Вы должны импортировать FormsModule в вашем приложении. module.ts

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