Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了typescript – PrimeNG的数据表没有触发onRowSelect事件大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在测试PrimeNG并尝试使用数据表.除了活动,一切都很好.我正在尝试使用Growl在选择行时显示消息(如PrimeNG网站上的Events演示).
我目前有这个:

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,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:

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

有效值是“单个”和“多个”

Plunker example

更新:

还必订阅onRowSELEct事件

(onRowSELEct)="onRowSELEct($event)"

哪里

>(onRowSELEct) – 来自DataTable组件的事件名称> onRowSELEct($event) – 组件中方法名称

大佬总结

以上是大佬教程为你收集整理的typescript – PrimeNG的数据表没有触发onRowSelect事件全部内容,希望文章能够帮你解决typescript – PrimeNG的数据表没有触发onRowSelect事件所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。