angular - PrimeNG Growl 无法绑定(bind)到 'value'，因为它不是 'p-growl' 的已知属性

Question

我是 PrimeNG 的新手，但我发现您可以用它创造美丽的事物。我正在尝试从 PrimeNg 构建一个咆哮，但我不断收到此错误“无法绑定(bind)到 'value'，因为它不是 '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 = <any>error);
        this.listReceivers = [];
    }

    onclick(): void {
      this.msgs=[];
      this.success=true;
      if(this.listReceivers.length===0) {
        this.msgs.push({severity:'error', summary:'Error', detail:'Er zijn geen ontvangers geselecteerd.'});
        this.success=false;
      }
      if(this.subject.length===0)
      {
        this.msgs.push({severity:'error', summary:'Error', detail:'Er is geen onderwerp opgegeven.'});
        this.success=false;
      }
      if(this.text.length===0)
      {
        this.msgs.push({severity:'error', summary:'Error', detail:'Er is geen inhoud ingegeven.'});
        this.success=false;
      }

      if(this.success===true)
      {
        this.msgsGrowl.push({severity:'success', summary:'Succes', detail:'De uitnodigingen zijn succesvol verstuurd.'});
      }
    }
}

我的组件 HTML

<div id="title">
    <span>{{pageTitle}}</span>
</div>
<div id="content">
  <p-growl [value]="msgsGrowl" sticky="sticky"></p-growl>
  <p-messages [value]="msgs"></p-messages>
  <p-pickList [source]="listSenders" [target]="listReceivers" sourceHeader="Kies ontvangers" targetHeader="Ontvangers" [responsive]="true" [sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}" [showSourceControls]="false" [showTargetControls]="false">
      <ng-template let-user pTemplate="item">
        <div class="ui-helper-clearfix">
          <div style="font-size:14px;">{{user.Name}}</div>
        </div>
      </ng-template>
    </p-pickList>
   <h1>Mail</h1>
<p><u>Onderwerp:</u> <input type="text" class="form-control" [(ngModel)]="subject"/></p>
<p-editor [(ngModel)]="text" [style]="{'height':'320px'}"></p-editor>
<p style="margin-top: 10px;"><button pButton type="button" label="Versturen" icon="fa-check" iconPos="left" (click)="onclick()"></button>
</p>

我的模块

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {CoordinatorPaneelComponent} from './coordinatorPaneel.component';
import {routing} from '../app.routing';
import {CoordinatorPaneelMenuComponent} from './DesignParts/coordinatorPaneelMenu.component';
import {CoordinatorTopMenu} from './DesignParts/coordinatorTopMenu.component';
import {CoordinatorDashboard} from './Dashboard/coordinatorDashboard.component';
import {CoordinatorInternshipAssignmentsViewComponent} from './InternshipAssignments/coordinatorInternshipAssignmentsView.component';
import {CoordinatorInternshipAssignmentsComponent} from './InternshipAssignments/coordinatorInternshipAssignments.component';
import {InternshipAssignmentService} from './Services/InternshipAssignment.service';
import {CommonModule} from '@angular/common';
import {CoordinatorInternshipProposalComponent} from './InternshipProposal/coordinatorInternshipProposal.component';
import {CoordinatorInternshipProposalDetailComponent} from './InternshipProposal/coordinatorInternshipProposalDetail.component';
import {CoordinatorInternshipProposalDetailViewComponent} from './InternshipProposal/coordinatorInternshipProposalDetailView.component';
import {CoordinatorInternshipProposalViewComponent} from './InternshipProposal/coordinatorInternshipProposalView.component';
import {PopupModel} from './DesignParts/popup.model';

import {CoordinatorInvitationsComponent} from './Invitations/coordinatorInvitations.component';
import {CoordinatorInvitationsViewComponent} from './Invitations/coordinatorInvitationsView.component';

import {PopupComponent} from './DesignParts/popup.component';
import {InternshipSpecialisationFilterPipe} from './Services/internshipSpecialisation-filter.component';
import {InternshipStatusFilterPipe} from './Services/internshipStatus-filter.component';
import {CoordinatorInternshipAssignmentDetailViewComponent} from './InternshipAssignments/coordinatorAssignmentDetailView.component';
import {CoordinatorInternshipAssignmentDetailComponent} from './InternshipAssignments/coordinatorAssignmentDetail.component';
import {MailService} from './Services/mail.service';
import {FormsModule} from '@angular/forms';
import {PickListModule} from 'primeng/primeng';
import {EditorModule, SharedModule, ButtonModule, MessagesModule, GrowlModule} from 'primeng/primeng';


@NgModule({
  imports: [routing, CommonModule, BrowserModule, FormsModule,
    PickListModule,
    SharedModule,
    ButtonModule,
    EditorModule,
    MessagesModule,
    GrowlModule
  ],
  declarations: [
    CoordinatorPaneelComponent,
    CoordinatorPaneelMenuComponent,
    CoordinatorTopMenu,
    CoordinatorDashboard,
    CoordinatorInternshipAssignmentsViewComponent,
    CoordinatorInternshipAssignmentsComponent,
    CoordinatorInternshipAssignmentDetailViewComponent,
    CoordinatorInternshipAssignmentDetailComponent,
    CoordinatorInternshipProposalComponent,
    CoordinatorInternshipProposalDetailViewComponent,
    CoordinatorInternshipProposalViewComponent,
    CoordinatorInternshipProposalDetailComponent,
    InternshipSpecialisationFilterPipe,
    InternshipStatusFilterPipe,
    CoordinatorInternshipProposalDetailComponent,
    CoordinatorInternshipProposalDetailViewComponent,
    PopupComponent,
    PopupModel,
    CoordinatorInvitationsComponent,
    CoordinatorInvitationsViewComponent,

  ],
  providers: [
    InternshipAssignmentService,
    MailService
  ]
})
export class CoordinatorModule {
}

TL;DR:我的 PrimeNG Message 模块可以工作，但我的 PrimeNG Growl 模块不工作

Answer 1

在您的 app.module.ts 中从 primeng 导入 GrowlModule。

import { GrowlModule } from 'primeng/primeng';

然后将 GrowlModule 添加到 app.module.ts 的导入部分。

imports [GrowlModule]

注意:-当您导入 primeng/primeng 时，它会在您的项目中引入所有 primeng 的 api，这可能会增加您的项目的大小。