假设我有一个看起来像这样的员工类:

export class Employee {

    jobTitle: string;
    firstName: string;
    lastName: string;

    boss: Employee;
    workers: Employee[];

    constructor(jobTitle: string, firstName: string, lastName: string){
        this.jobTitle = jobTitle;
        this.firstName = firstName;
        this.lastName = lastName;
    }

    public addWorker(worker: Employee){
        this.wokers.push(worker);
        worker.boss = this;
    }

}

假设我们的初始Employees看起来像这样:

function getInitialStaff(): Employee {

    let headWaiter: Employee = new Employee( "Head Waiter", "Sarah", "Hilton" );
    headWaiter.addWorker(new Employee("Bus Boy", "Joe", "BeefEater"));
    headWaiter.addWorker(new Employee("Waiter", "Randy", "Rainman"));

    let headCheif: Employee = new Employee( "Head Cheif", "Phil", "Yorstomux" );
    headWaiter.addWorker(new Employee("Dishwasher", …

我有一个在primeNG数据表之外的刷新按钮.如何以编程方式触发刷新数据表？

这样的事情:

<div class="pull-right">
  <button
    id="FilterBtnId"
    (click)="???">
  </button>
                </div>
<p-dataTable
   #datatable
   [value]="datasource"
   [(selection)]="jobs"
   [totalRecords]="totalRecords"
   selectionMode="multiple"
   resizableColumns="true"
   [pageLinks]="10"
   [rows]="10"
   [rowsPerPageOptions]="[10, 25, 50, 100]"
   [paginator]="true"
   [responsive]="true"
   [lazy]="true"
   (onLazyLoad)="getNewDatasource($event)"
   (onRowSelect)="onRowSelect($event)"
   >
     <p-column [style]="{'width':'40px'}" selectionMode="multiple"></p-column>
     <p-column *ngFor="let col of dt.colDefs" [field]="col.field" [header]="col.headerName" [sortable]="true">
     </p-column>
</p-dataTable>

我有一个非常基本的问题,我无法自己回答,因为大多数指向http://www.primefaces.org/primeng的链接都不再适用.我也尝试注册他们的论坛,但他们的激活邮件永远不会到来.

我使用Angular2并拥有一个包含两列的数据表:filename和status.我想要更改的状态列.它现在拥有1到4的数字,我想根据状态显示一个glyphicon.

我现在有这个,这是有效的:

<p-dataTable [hidden]="loading" [value]="files" selectionMode="single"  sortField="Status" [sortOrder]="-1">
  <p-column field="FileName" header="Naam" sortable="true"></p-column>
  <p-column field="Status" header="Status" sortable="true"></p-column>
</p-dataTable>

我试过这个,只是为了测试模板,但没有任何变化:

<p-dataTable [hidden]="loading" [value]="files" selectionMode="single"  sortField="Status" [sortOrder]="-1">
  <p-column field="FileName" header="Naam" sortable="true"></p-column>
  <p-column field="Status" header="Status" sortable="true">
    <template let-file="rowData">
        {{file.Status == 1 ? "Yes" : "No"}}
    </template>
  </p-column>
</p-dataTable>

所以除了得出结论我没有正确使用它.

我们正在使用PrimeNG 1.0.0-beta.16

我使用aspnetcore-spa模板作为创建管理面板的起点.接下来,我添加PrimeNG库以使用它的组件.

不幸的是,当我将ButtonModule导入到app.module.ts并刷新时,我收到错误'Event is undefined'.我无法弄清楚几天的原因是什么,所以有人可以帮助我吗？

UPDATE

• 所以首先我用它生成存根 yo aspnetcore-spa
• 下一个 npm install font-awesome primeng --save

• 然后我添加font-awesome和PrimeNG css文件 webpack.config.vendor.js

   vendor: [
      '@angular/common',
      '@angular/compiler',
      '@angular/core',
      '@angular/http',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router',
      '@angular/platform-server',
      'angular2-universal',
      'angular2-universal-polyfills',
      'bootstrap',
      'bootstrap/dist/css/bootstrap.css',
      'es6-shim',
      'es6-promise',
      'event-source-polyfill',
      'jquery',
      'zone.js',            
      'font-awesome/css/font-awesome.css',
      'primeng/resources/themes/sunny/theme.css',
      'primeng/resources/primeng.css'
  ]
  

  Run Code Online (Sandbox Code Playgroud)

• 重建供应商依赖项 webpack --config webpack.config.vendor.js

• 然后我将ButtonModule导入app.module.ts

现在如果我启动应用程序,我会得到例外

这个代码片段的例外情况

 __decorate([
    core_1.HostListener('mouseenter', ['$event']), 
    __metadata('design:type', Function), 
    __metadata('design:paramtypes', [Event]), 
    __metadata('design:returntype', void 0)

更新2

我发现问题出在服务器端渲染中,所以我删除了它.它适用于我,但如果不转向服务器端渲染,如何解决这个问题仍然很有趣.

我是PrimeNG的新手,但我发现你可以用它创造美好的东西.我试图从PrimeNg建立一个咆哮,但我不断收到这个错误"无法绑定到'值',因为它不是'p-growl'的已知属性".我使用了PrimeNG的"消息",这个工作正常,所以我不知道我做错了什么,因为另一个确实有效.

我的组件ts

import {Component, OnInit} from '@angular/core';
import {IMailModel} from '../models/mail.model';
import {MailService} from '../Services/mail.service';
import {Message} from 'primeng/primeng';


@Component({
    selector: 'coordinator-invitations',
    moduleId: module.id,
    templateUrl: 'coordinatorInvitations.component.html',
    styleUrls: ['../../assets/css/in/content.css'],
})

export class CoordinatorInvitationsComponent implements OnInit {
    listReceivers: IMailModel[];
    listSenders: IMailModel[];
    pageTitle: string = 'Uitnodigingen versturen';
    errorMessage: string;
    msgs: Message[] = [];
    msgsGrowl: Message[] = [];
    subject: string = "";
    text: string="";
    success: boolean;


    constructor(private _mailService: MailService) {

    }

    ngOnInit(): void {
        this._mailService.getMailAddresses()
            .subscribe(listSenders => this.listSenders = listSenders,
                error => this.errorMessage = …

目前,我正在为新的Angular 2项目使用UI-Libraries.我试过Ng-Bootstrap和Material.不幸的是,他们仍处于Alpha和Beta状态.我还检查了PrimeNG.目前,PrimeNG提供了比Material和NgBootstrap更多的组件.尤其是在桌子方面.PrimeNG似乎很稳定,可以用于生产.

我对PrimeNG的网格系统并不满意.例如,不清楚如何执行列偏移.我在文档(https://www.primefaces.org/primeng/#/grid)中也找不到这个.

我开始在PrimeNG组件中使用bootstrap 4.对我来说,这还不是一个好方法.感觉就像我有两个框架在某些情况下做同样的事情.例如,如果我想创建一个按钮,我可以使用bootstrap类来执行以下操作

<button class="btn btn-primary">Button with Bootstrap</button>

或者我可以使用PrimeNG执行以下操作

<button pButton type="button" label="Button created with PrimeNG"></button>

我是否缺少PrimeNG的一些功能,或者将Bootstrap与PrimeNG结合使用是有效的,因为它在Grid-Layout方面提供了更多功能.

我买了一个Angular 4模板主要是为了看看布局是如何完成的,但包括工作组件,我注意到他们在app组件中有一堆设置,主要用于菜单,改变样式,主要是控制外部框架.

在菜单组件和其他一些组件中,他们使用以下内容与AppComponent设置进行通信:

constructor(@Inject(forwardRef(() => AppComponent)) public app:AppComponent) {}

并将在菜单组件中调用类似:this.app.darkMenu = true的内容

这是有效的设计,好的,坏的,过时的？我甚至不知道你可以像这样与App或父组件通信？这应该是一个Observable Subject或EventEmitter,还是可以通过forwardRef进行通信？这似乎与.NET类似,我可以使用this.master.whateverproperty与MasterPage进行通信.

我喜欢forwardRef如何工作,但不确定我是否应该使用它或更改它以不同的方式进行通信？

我试图在primeng中使用编辑器控件:https://www.primefaces.org/primeng/#/editor

但是我收到了错误:

ERROR ReferenceError:在Editor.webpackJsonp .../../../../primeng/components/editor/editor.js.Editor.ngAfterViewInit中未定义Quill

我的项目使用:

• Angular Cli:1.4.1
• 角度:4.3.6
• NPM:5.4.1
• 节点:6.10.0
• PrimeNG:4.2.0

我发现了这个问题:https://github.com/primefaces/primeng/issues/807

我按照说明操作:

导入编辑器模块

import {EditorModule} from 'primeng/primeng';

安装包:

npm install quill --save

npm install @types/quill --save

更新angular-cli.json

"styles": [ "../node_modules/quill/dist/quill.core.css", "../node_modules/quill/dist/quill.snow.css", ], "scripts": [ "../node_modules/quill/dist/quill.js" ],

但它仍然有同样的问题.我只是添加默认标记:

<p-editor [(ngModel)]="text" [style]="{'height':'320px'}"></p-editor>

我得到错误,它看起来像这样:

我没有尝试的那个线程上唯一的东西是安装webpack插件,因为我使用的是角度cli,我不认为这是一个选项.

我可以尝试解决这个问题？

我正在使用富文本编辑器组件primeng.这个编辑器将我键入的所有内容都转换为html.但有时我想用纯文本输出这些文本.angular 2是否提供了一种从文本中轻松删除html标签的方法？

谢谢.

在我们的Angular项目中,我们有一个包含表单字段和PrimeNG FileUpload的表单,我们尝试使用所选文件发送表单数据.

我们已经查看了Web 上的文档和大量示例,但它们都没有满足我们的要求(使用"保存"按钮发送表单和文件而不是自动上载或FileUpload按钮).

我们通过将每个模型属性附加到文件上载请求中的文件来尝试以下方法,但我认为必须通过在Save方法(在.ts文件中)中将文件附加到模型属性来实现更智能的方法.

HTML:

<p-fileUpload name="files" url="/MyController/Save" 
    (onBeforeSend)="onBeforeSendFile($event)" 
    (onUpload)="onUploadFile($event)" 
    (onError)="onErrorFile($event)" 
    (onBeforeUpload)="onBeforeUploadFoto($event)" 
    multiple="multiple" 
    chooseLabel="Select" 
    uploadLabel="Load" 
    cancelLabel="Cancel">
</p-fileUpload>

.TS:

//code omitted fo brevity

//at here we append model properties to the array in file upload request:
onBeforeUploadFoto(event: any) {
    event.formData.append('id', this.entityId);
    event.formData.append('name', this.entityName);
}