PrimeNG Growl Nie można powiązać z "wartością", ponieważ nie jest ona znaną własnością "p-growla"

Question

Jestem nowicjuszem w PrimeNG, ale odkryłem, że można z nim tworzyć piękne rzeczy. Próbuję zbudować warczenie z PrimeNg, ale ciągle pojawia się ten błąd "Nie można powiązać z" wartością ", ponieważ nie jest to znana właściwość" p-grow ". Użyłem "Wiadomości" od PrimeNG i ten działa dobrze, więc nie wiem, co robię źle, ponieważ ten drugi działa.

Moi ts elementów

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.'}); 
     } 
    } 
} 

Moja komponent 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> 

Mój moduł

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: Moje prace Moduł PrimeNG wiadomości, ale mój PrimeNG Growl modul e nie działa

Answer 1

Restart serwera naprawił ten problem, ale po ponownym uruchomieniu odkryłem, że kiedy używasz komponentu Message and Growl na tej samej stronie, która zaczyna się podsłuchiwać.

Answer 2

trzeba importować GrowlModule w składniku

import {GrowlModule,Message} from 'primeng/primeng';