typescript PrimeNG 的数据表未触发 onRowSelect 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38640510/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
PrimeNG's data table not firing onRowSelect event
提问by DGarvanski
I'm currently testing PrimeNG and trying to use the data table. Everything works fine, except for the events. I'm trying to use Growl to show a message when a row is selected(like the Events demo on the PrimeNG website). I currently have this:
我目前正在测试 PrimeNG 并尝试使用数据表。一切正常，除了事件。我正在尝试使用 Growl 在选择一行时显示一条消息（如 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;
}
}
The dashboard component template looks like this:
仪表板组件模板如下所示：
<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>
However, when I select a row the event doesn't fire. It doesn't stop at a breakpoint, so it doesn't register it at all. Is there a solution or some advice as to where I should look to fix this?
但是，当我选择一行时，事件不会触发。它不会在断点处停止，因此根本不会注册它。关于我应该在哪里解决这个问题，是否有解决方案或一些建议？
回答by yurzui
Looks like you forgot to specify selectionMode:
看起来你忘了指定selectionMode：
<p-dataTable [value]="names" selectionMode="single" (onRowSelect)="onRowSelect($event)">
...
</p-dataTable>
valid values are "single" and "multiple"
有效值为“单个”和“多个”
Update:
更新：
Also you have to subscribe on onRowSelectevent
你也必须订阅onRowSelect事件
(onRowSelect)="onRowSelect($event)"
where
在哪里
(onRowSelect)- name of event from DataTable componentonRowSelect($event)- name of method within your component
(onRowSelect)- 来自 DataTable 组件的事件名称onRowSelect($event)- 组件中方法的名称
回答by Cenvinte
You have to import FormsModule in your app.module.ts
您必须在 app.module.ts 中导入 FormsModule
import { FormsModule } from '@angular/forms';
