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

我是PrimeNG的新手，但我发现您可以用它创造美丽的事物。我正在尝试从PrimeNg构建咆哮声，但我不断收到此错误“由于它不是'p-growl'的已知属性，因此无法绑定(bind)到'value'”。我已经使用了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消息模块可以工作，但是我的PrimeNG Growl模块不能工作

最佳答案

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

import { GrowlModule } from 'primeng/primeng';

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

imports [GrowlModule]

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

关于angular - PrimeNG Growl无法绑定(bind)到 'value'，因为它不是 'p-growl'的已知属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43300054/